Laravel编辑表单中如何根据数据库值正确勾选checkbox复选框

问题根因 #

1. HTML中所有复选框重复使用了相同的id="editRoles"，DOM规范要求id唯一，使用$('#editRoles')选择器只会匹配到第一个复选框，是始终只有第一个被勾选的直接原因
2. 回显逻辑未做值匹配：直接给所有复选框统一设置checked属性，要么全部选中要么只改第一个，没有和后端返回的已选ID做对应
3. 控制器返回字段不匹配：当前控制器返回的是role和permission字段，AJAX代码中读取的result.roles字段不存在，无法拿到正确的已选值

修复步骤 #

1. 修正HTML代码 #

移除重复id，同时将复选框的name改为数组格式，避免表单提交时只能拿到最后一个选中值

<form action="" method="put" id="editForm">
    <div id="editModal">
        <div class="form-group row">
            <label for="roles" class="col-md-2 col-form-label">Roles</label>
            <div class="col-md-10 mt-2">
                <?php foreach ($roles as $value) : ?>
                    <div class="form-check-inline">
                        <label class="form-check-label">
                            <input type="checkbox" name="roles[]" value="{{$value->id}}">
                            <?= $value->name ?>
                        </label>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</form>

2. 修正控制器代码 #

返回当前资源关联的已选ID数组，此处以编辑用户关联角色为例，若为编辑角色关联权限可对应调整查询逻辑

public function edit(Request $request, $id){
    $decode_id = Hashids::decodeHex($id);
    // 查询当前编辑的用户
    $user = User::findOrFail($decode_id);
    // 取出用户已关联的角色ID数组
    $checkedRoleIds = $user->roles()->pluck('id')->toArray();

    if ($request->ajax()) {
        return response()->json(['checked_role_ids' => $checkedRoleIds]);
    }
}

3. 修正AJAX回显逻辑 #

先重置所有复选框状态，再根据返回的已选ID数组匹配对应复选框设置选中状态

$('body').on('click', '#edit', function(e) {
    id = $(this).data('id');
    $.ajax({
        url: "users/" + id + "/edit",
        method: 'GET',
        success: function(result) {
            $('#editModal').show();
            // 先重置所有复选框为未选中
            $('#editModal input[type="checkbox"]').prop('checked', false);
            // 遍历已选ID，匹配对应value的复选框设置选中
            result.checked_role_ids.forEach(roleId => {
                $(`#editModal input[type="checkbox"][value="${roleId}"]`).prop('checked', true);
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者man99