Laravel 7 – Update value of checkbox without form or button

I’m stuck with my project, please help…

This is the situation: In my project I have to assign a teacher to give permission to grade students, because a group can have 2 or more teachers, but only one has to have permission to grade, so… I added a column in my table ‘teachers’ in the database with the name ‘grade’ of type boolean. And in my view I added a checkbox… How do I change the value of a checkbox without using any form or button to trigger the action and activate the checkbox in the teacher who is going to have permission to grade? And this value should also be updated in the database.

• This is my view…

    <!--teachers-->
    <table class=" table table-sm table-striped table-bordered ">
        <thead class="text-white bg-primary">
            <tr>
                <th>@lang('show.Identifier')</th>
                <th>@lang('show.email')</th>
                <th>@lang('show.grade')</th>
                <th>@lang('show.delete')</th>
            </tr>
        </thead>
        
        <tbody class="small text-center">
            @foreach ($group->teachers as $teacher)
                <tr>
                    <td >{{$teacher->Identifier}} </td>
                    <td >{{$teacher->email}} </td>
                    <td>
                        <input id="active" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade" value="1">
                    </td>
                    <td>
                        <form method="post" action="{{url('Groups/Disenroll/'.$group->idGroup.'?idTeacher='.$teacher->idTeacher)}}">
                        {{csrf_field()}}
                            <button type="submit"  class="btn btn-sm btn-outline-danger"  > <i class="material-icons small" >call_split</i></button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

And this is an image of the table, if it helps…

Answer

I think you can use something like JQuery for this.

You can firstly add a class of toggle-class to your checkbox

<input class="active toggle-class" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade">

And secondly, make sure that you have a way to keep track of who’s doing the grades.

Add data-id=”{{ $teacher->Identifier}}” on your checkbox

<input data-id="{{ $teacher->Identifier}}" class="active toggle-class" {{$teacher->grade == 1 ?'checked':''}} type="checkbox" name="grade">

In your web.php add a new route

Route::get('/path/to/updateGrader/status', [AppHttpControllersMyController::class, 'updateGraderStatus']);

Add the below code to where your checkbox is located

$('.toggle-class').on('change',function(){
    let status = $(this).prop('checked') == true ? true : false;
    let grader_id = $(this).data('id');
    $.ajax({
       type:'GET',
       dataType:'json',
       url:'/path/to/updateGrader/status', // add your earlier created route here
       data:{'grade': status, 'grader_id': grader_id},
       success: function(data){
        console.log('success');
     }
   });
});

In your Controller, MyController in our case create a new function

public function updateGraderStatus(Request $request)
{
       $grader = MyModel::find($request->grader_id);
       $grader->grade = $request->grade;
       $grader->save(); 
}

Please let me know if this helps you. I didn’t test it out but I think this is how you would go about it.