点击同组复选框禁用其余项并保留自身可用的jQuery实现无效问题

你的问题核心出在箭头函数的this绑定上！箭头函数不会绑定自身的this，它会继承外层作用域的this，所以这里的this并不是你点击的那个复选框元素，导致后续的选择器和属性操作全部失效了。

修正方案一：改用普通函数 #

把箭头函数替换成普通函数，这样this就会正确指向触发事件的复选框元素：

$(".group").change(function() {
  console.log("hitting the check box");
  const isChecked = this.checked;
  $(".group").not(this).prop("disabled", isChecked);
});

修正方案二：使用event.target（保留箭头函数） #

如果你坚持想用箭头函数，可以通过事件对象的target属性获取当前点击的元素：

$(".group").change((event) => {
  console.log("hitting the check box");
  const target = event.target;
  const isChecked = target.checked;
  $(".group").not(target).prop("disabled", isChecked);
});

额外优化说明 #

原代码中用this.className来选择元素，虽然当前元素只有group一个class，但如果后续元素添加多个class的话会出现选择错误。直接使用.group选择器更稳妥，就像上面的代码示例那样。

测试以上两种方案，点击任意一个复选框，其他同class的复选框会被禁用；取消勾选时，其他复选框会恢复可用，完全符合你的需求。

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