基于Ajax响应勾选模态框内复选框失败求助

看起来你遇到的问题主要有几个潜在原因，咱们一步步来排查和解决：

1. 修复重复ID的问题（关键！） #

首先看你的HTML代码，所有复选框都用了同一个id="user_ids_for_edit"——这是不符合HTML规范的，ID必须是页面唯一的。这会导致你的jQuery选择器$('#user_ids_for_edit[value="..."]')只能匹配到第一个复选框，后面的都选不到。

解决方法：去掉重复的ID，改用name属性来定位元素。修改你的HTML：

<label class="checkbox"> 
  <input type="checkbox" name="user_ids_for_edit[]" data-toggle="checkbox" value="14">Billy Joel 
</label>

2. 用prop()替代attr()设置选中状态 #

在jQuery 1.6及以后的版本中，对于checked这种布尔类型的DOM属性，应该使用prop()而不是attr()。attr()操作的是HTML标签上的属性，而prop()操作的是DOM元素的实际状态，当页面加载后，复选框的选中状态是由DOM属性控制的。

修改你的Ajax成功回调中的代码：

success: function(response) {
  for (var user in response) {
    // 用name属性选择器定位对应的复选框
    var $checkbox = $('input[name="user_ids_for_edit[]"][value="' + response[user].id + '"]');
    // 设置选中状态
    $checkbox.prop('checked', true);
  }
}

3. 处理data-toggle="checkbox"插件的UI更新 #

你用了data-toggle="checkbox"，这应该是Bootstrap的自定义复选框插件（比如Bootstrap Checkbox或Bootstrap Toggle）。这类插件会隐藏原生复选框，用自定义样式替代，所以只修改prop('checked', true)可能不会更新UI。

根据你使用的插件类型，添加对应的更新代码：

• 如果是Bootstrap Checkbox插件：

  $checkbox.checkbox('check');
  

• 如果是Bootstrap Toggle插件：

  $checkbox.bootstrapToggle('on');
  

把这些整合起来，最终的回调代码大概是这样：

success: function(response) {
  for (var user in response) {
    var userId = response[user].id;
    var $checkbox = $('input[name="user_ids_for_edit[]"][value="' + userId + '"]');
    // 设置原生选中状态
    $checkbox.prop('checked', true);
    // 触发插件UI更新（根据你用的插件选一个）
    $checkbox.checkbox('check'); 
    // 或者 $checkbox.bootstrapToggle('on');
  }
}

试试这些步骤，应该能解决你的问题！

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