Checkbox名称改为数组形式后，选中禁用其他复选框的JS修复方案

这个问题我之前碰到过，核心原因是方括号[]在jQuery/CSS选择器里属于特殊字符，直接写input[name=sessionTime[]]会被解析成属性选择器的语法片段，导致浏览器抛出语法错误。下面给你两种修复方式，以及优化后的完整代码：

1. 修复选择器的语法问题 #

最直观且易读的方式是用双引号包裹name属性值，让jQuery把整个sessionTime[]当作完整的属性值解析，而不是拆分方括号：

// 正确的选择器写法
$('input[name="sessionTime[]"]')

如果不想用引号，也可以转义方括号（但可读性较差，不推荐）：

// 转义后的选择器，\\是为了在JS字符串里表示单个\
$('input[name=sessionTime\\[\\]]')

2. 优化禁用/启用逻辑（推荐用.prop()代替.attr()） #

原代码里用.attr()操作disabled属性，对于这种布尔类型的DOM属性，更推荐使用.prop()方法——因为.attr()是操作HTML标签上的属性，而.prop()直接操作DOM元素的状态，处理禁用/选中这类状态时更可靠。

完整修正后的JS代码 #

$('input[name="sessionTime[]"]').change(function(){
  if($(this).is(':checked')){
    // 先禁用所有同名复选框
    $('input[name="sessionTime[]"]').prop('disabled', true);
    // 重新启用当前选中的复选框
    $(this).prop('disabled', false);
    console.log('其他时段选项已禁用');
  } else {
    // 取消选中时，恢复所有复选框的可用状态
    $('input[name="sessionTime[]"]').prop('disabled', false);
    console.log('所有时段选项已启用');
  }
});

补充说明 #

如果你的需求是只能选择一个时段，其实原生的radio按钮（单选按钮）更符合语义，而且不需要额外写JS逻辑。但如果必须用复选框（比如需要支持“取消选择”的操作），上面的代码就能完美实现你的需求。

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