如何使用jQuery勾选Bootstrap模态框内id为edit-address的复选框

你遇到的问题大概率不是选择器错误，而是执行时机不对、或者自定义复选框的样式没同步更新两个原因导致的：

• 模态框DOM未渲染就执行代码：Bootstrap模态框的内容是拖拽后动态生成插入到页面的，如果你在触发拖拽后立刻执行勾选代码，此时模态框内的input元素还没挂载到DOM树，jQuery找不到对应元素自然操作无效。
• 自定义复选框样式未同步：你代码里用了custom-checkbox类的自定义复选框组件，这类组件通常会绑定change事件来同步勾选状态的视觉样式，只设置checked属性不会触发样式更新，页面看起来就像没勾选一样。

你可以使用Bootstrap模态框自带的shown.bs.modal事件（模态框完全渲染显示后才触发）来执行操作，同时手动触发change事件同步样式，参考代码如下：

// 把#你的模态框ID替换为你实际绑定模态框的元素ID
$('#你的模态框ID').on('shown.bs.modal', function () {
  // 设置勾选状态
  $('#edit-address').prop('checked', true)
  // 触发change事件同步自定义复选框的视觉样式
  $('#edit-address').trigger('change')
})

如果执行后还是无效，可以按以下方案调整：
如果是动态生成模态框的场景，可能存在ID重复、事件绑定失效的问题，可以改用事件委托+精准选择器的写法：

$(document).on('shown.bs.modal', '.modal:visible', function () {
  // 直接选中当前可见模态框内的对应复选框，避免ID重复命中旧元素
  $('input[data-option="edit-address"]', this).prop('checked', true).trigger('change')
})

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