Unable to implement a feature in my Laravel project where the title's text should have 'line-through' style when a checkbox is checked, and normal otherwise. The jQuery function I attempted doesn't seem to work. Can anyone help me with this issue? Below is the code snippet from my blade file:
<tbody>
@forelse($tasks as $task)
<tr>
<td>
<div class="icheck-primary d-inline ml-2">
<form
style="display:none"
id="form-checked-{{$task->id}}"
action="{{ route('completed.update',$task->id) }}"
method="post">
@csrf
@method('put')
</form>
<input
type="checkbox"
class="icheck-primary d-inline ml-2"
id="linethrough"
onclick="event.preventDefault();
if(confirm('Want\'s to complete the Task!')){
$('#form-checked-{{$task->id}}').submit();
}
"
{{ !empty($task->completed_at) ? 'checked' : '' }}/>
</div>
</td>
<td class="myjqueryclass" id="clls-{{$task->id}}">
{{$task->title}}<br>
</td>
</tr>
</tbody
The issue lies within my jQuery function:
<script>
$(document).ready(function($id){
$('input[type="checkbox"]').click(function(){
if($(this).is(":checked")){
$('#clls-' + $id).addClass('addlinethrough');
}
else if($(this).is(":not(:checked)")){
$('#clls-' + $id).removeClass('addlinethrough');
}
});
});
</script>
Here's the CSS class used:
<style>
.addlinethrough {
text-decoration: line-through;
}
</style>
If you have any alternative solutions or suggestions, please feel free to share. One observation is that the state isn't retained when using a class name instead of an ID.