Bootstrap 3.4.1表格Checkbox带自定义属性点击不勾选问题求助

核心问题分析 #

1. 原JS逻辑完全写反：if ($checkbox.is(e.target))的判断是「点击目标是checkbox」，但注释却写「用户没点击checkbox」，导致点击checkbox时手动翻转状态，和浏览器原生的勾选动作冲突，所以无法正常勾选。
2. 事件冒泡触发额外干扰：点击checkbox时，事件会向上冒泡到tr，tr的点击事件会干扰checkbox的状态，加上行点击时自动勾选的逻辑，进一步加剧了异常。
3. data-chk-select-employees属性本身不影响勾选，是事件逻辑错误叠加导致的异常。

修复代码 #

修正后的JavaScript #

$(document).ready(function() {
  // 阻止checkbox及label的事件冒泡到tr，避免行点击逻辑干扰勾选
  $('#mainTable input[type="checkbox"], #mainTable .checkbox label').on('click', function(e) {
    e.stopPropagation();
  });

  // 如果不需要行点击的其他功能，下面这段可以直接删掉
  $('#mainTable tr').on('click', function() {
    // 这里放你需要的行点击操作，不会再触发checkbox勾选
  });
});

关键改动 #

• 阻断事件冒泡：给checkbox和它的外层label添加点击事件，调用stopPropagation()，这样点击checkbox时事件不会传到父级tr，彻底避免行点击逻辑影响勾选行为。
• 删除错误的状态翻转逻辑：原代码里点击checkbox时手动修改状态的逻辑完全错误，移除后浏览器原生的勾选行为就能正常工作。

效果验证 #

• 保留data-chk-select-employees="@result.ID"属性，checkbox点击可正常勾选/取消。
• 只有点击checkbox（包括label区域）时才会触发勾选，点击表格行其他区域不会影响checkbox状态。

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