Bootstrap模态框打开时用jQuery勾选checkbox失效如何解决

问题根源 #

1. jQuery方法使用错误：jQuery 1.6及以上版本明确区分了HTML静态特性（Attribute）和DOM动态属性（Property），复选框的checked属于动态属性，使用attr()修改无法生效，必须使用prop()方法。
2. 执行时机错误：若勾选代码在模态框DOM渲染完成前执行，会找不到对应元素导致设置无效。
3. 潜在隐患：你提供的代码中存在两处id="edit-address"的元素，DOM id必须全局唯一，重复id会导致选择器匹配异常。

具体修复步骤 #

1. 替换状态控制代码 #

将原来的attr写法替换为prop写法：

// 勾选复选框
$('#edit-address').prop('checked', true)
// 取消勾选复选框
$('#edit-address').prop('checked', false)
// 获取当前复选框状态
const isChecked = $('#edit-address').prop('checked')

2. 绑定模态框事件控制状态 #

将勾选逻辑绑定到Bootstrap模态框的shown.bs.modal事件（模态框完全显示、DOM渲染完成后触发），满足首次默认勾选、后续根据数据库值动态调整的需求：

$('#bs-modal-edit-field-address').on('shown.bs.modal', function () {
  // 此处可替换为从接口/数据库读取的真实状态值，首次打开默认传true即可
  const dbCheckedStatus = true 
  $('#edit-address').prop('checked', dbCheckedStatus)
  // 如果使用了自定义复选框样式，可加trigger触发样式更新
  // $('#edit-address').prop('checked', dbCheckedStatus).trigger('change')
})

3. 修正重复id问题 #

删除你代码中冗余的第一个id="edit-address"的input元素，保证页面内只有一个该id的复选框。

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