如何在AJAX编辑模态框中加载已勾选的checkbox状态

现有代码核心问题 #

• 回调参数名与使用变量不一致：success回调接收返回值的参数是x，但代码里判断长度用了未定义的resp，导致逻辑根本不会执行
• checkbox选择器错误：HTML中checkbox的name属性为role_id[]，代码里用input[name=role_id]匹配不到任何元素
• 勾选逻辑错误：没有匹配当前checkbox的value和返回的已选role_id数组，直接给所有匹配到的元素设置checked，不符合回显需求
• 没有做状态重置：打开编辑框时没有清空之前的勾选状态，多次打开会出现勾选错乱

修正后的代码 #

AJAX编辑函数 #

function edit_function(task, id) {
    $('#editModal').modal();
    // 先重置所有checkbox的勾选状态，避免旧数据干扰
    $('#editModalForm input[name="role_id[]"]').prop('checked', false);
    $.ajax({
        method: 'POST',
        url: '<?php echo base_url() . 'user/edit/' ?>' + id,
        dataType: 'json',
        success: function(x) {
            if (x.length > 0) {
                const userData = x[0];
                // 赋值邮箱
                $("#editModalForm input[name=email]").val(userData.email);
                // 拿到已选的角色id数组
                const checkedRoles = userData.role_id;
                // 遍历匹配勾选
                checkedRoles.forEach(roleId => {
                    $(`#editModalForm input[name="role_id[]"][value="${roleId}"]`).prop('checked', true);
                });
            }
        }
    });
}

HTML优化建议 #

当前循环生成的checkbox所有id都是role_id[]，id属性不能重复，会导致DOM选择异常，建议修改为动态id：

<?php foreach ($roles as $row) : ?>
<div class="form-check-inline">
    <label class="form-check-label">
        <input type="checkbox" name="role_id[]" id="role_id_<?php echo $row->role_id; ?>"
            value="<?php echo $row->role_id; ?>"><?php echo $row->role_id; ?>
    </label>
</div>
<?php endforeach; ?>

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