Laravel AJAX Bootstrap Toggle Switch 不起作用

Question

我目前正在从事 Laravel 项目。 在管理视图中，我获得了用于激活/停用用户的 Bootstrap Toggle。 除了我无法将复选框更改为切换之外，一切都运行良好。 当我将 class="toggle-class" 更改为 data-toggle="toggle" 时，会出现切换，但不会再将数据发送到数据库，因此代码将不再起作用...

这就是我所拥有的

这就是我要的

我的管理员视图

    <input id="{{$user->id}}" class="toggle-class" 
                            type="checkbox" data-onstyle="success" data-offstyle="danger" 
                            data-on="Active" data-off="Inactive" 
                            {{ $user->status ? 'checked' : '' }}
                            onclick="changeStatus(event.target, {{ $user->id }});">
    


    function changeStatus(_this, id) {
    var status = $(_this).prop('checked') == true ? 1 : 0;
    let _token = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: '{{route("change.status")}}',
        type: 'POST',
        data: {
            _token: _token,
            id: id,
            status: status 
        },
        success: function(data){
            if (data.type == "error") {
                $('#message').html("<div class='alert alert-danger card h2'>"+data.fail+"</div>");} 
                else {
                    $('#message').html("<div class='alert alert-success card h2'>"+data.success+" 
        </div>");
}}
    });
}

我的控制器中的方法

public function changeStatus(Request $request)
{
    $user = User::find($request->id);
    $user->status = $request->status;
    $user->save();

    return response()->json(['success'=>'Status change successfully.']);
}

不知道我在做什么错 tbh。 似乎无法让它工作。

Answer 1

我遇到了和你一样的问题，通过替换不活动和活动的地方我的问题得到了解决。

在此处输入图片说明

var status = $(this).children().prop('checked') == true ? 'active' : 'inactive';

到这一行

var status = $(this).children().prop('checked') == true ? 'inactive' : 'active';

这是我的代码

 < script type = "text/javascript" > $(document).ready(function() { $('.toggle').click(function() { var status = $(this).children().prop('checked') == true ? 'inactive' : 'active'; var id = $(this).children().data('id'); $.ajax({ type: 'POST', dataType: "json", url: 'statusUpdate', data: { 'status': status, 'id': id }, headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, success: function(data) { Swal.fire( 'GREAT!', 'Status changed successfully', 'success') location.reload(); console.log(data.success); } }); }); }) < /script>

 <input data-id="{{ $catego->id }}" class="toggle-class" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="warning" data-offstyle="dark" type="checkbox" {{ $catego->status == 'active' ? 'checked' : '' }}>

路由代码// Route::post('statusUpdate', [CategoryCRUDController::class, 'changeStatus']);

 // My controller public function changeStatus(Request $request) { $category = Category::find($request->id); $category->status = $request->status; $category->save(); return response()->json(['success'=>' status change successfully.']); }

源代码