如何优化动态生成Checkbox的勾选联动禁用逻辑？

原生JavaScript 方案 #

利用DOM选择器批量操作元素，彻底告别逐个遍历的冗余代码：

// 获取主控制Checkbox
const mainCheckbox = document.getElementById('chkLoc0');

// 监听状态变更事件
mainCheckbox.addEventListener('change', function() {
  // 批量选中所有name为AreChecked且排除chkLoc0的Checkbox
  const otherCheckboxes = document.querySelectorAll('input[name="AreChecked"]:not(#chkLoc0)');
  
  otherCheckboxes.forEach(checkbox => {
    checkbox.checked = false; // 统一取消勾选
    checkbox.disabled = this.checked; // 根据主Checkbox状态设置禁用/启用
  });
});

jQuery 方案 #

借助jQuery的选择器和批量操作API，代码更精简：

$('#chkLoc0').on('change', function() {
  // 链式操作批量处理目标Checkbox
  $('input[name="AreChecked"]:not(#chkLoc0)')
    .prop('checked', false)
    .prop('disabled', $(this).is(':checked'));
});

关键说明 #

• 两种方案都通过属性选择器+排除选择器批量定位元素，无需手动枚举50个id
• 主Checkbox取消勾选时，其他Checkbox会自动恢复可用状态，符合常规交互逻辑
• 事件仅需绑定一次，后续只要Checkbox遵循name=AreChecked、id=chkLocN的规则，新增元素也能自动适配

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