单选按钮切换后复选框多选限制未解除的问题求解

问题根源：点击「仅能选择一个复选框」单选按钮时，给所有复选框绑定了change事件来限制选中数量，但切换回「可选择所有复选框」单选按钮时，未移除该绑定事件，导致限制依然生效。

修改后的代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="r" id="r1" checked> 可选择所有复选框
<input type="radio" name="r" id="r2"> 仅能选择一个复选框
<br>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

JavaScript 部分

$('#r2').click(function() {
  // 清空所有复选框选中状态
  $('input[type="checkbox"]').prop("checked", false);
  // 给change事件添加命名空间，方便后续精准移除
  $('input[type="checkbox"]').on('change.singleLimit', function() {
    $('input[type="checkbox"]').not(this).prop('checked', false);
  });
});

$('#r1').click(function() {
  // 清空所有复选框选中状态
  $('input[type="checkbox"]').prop("checked", false);
  // 移除限制选择的change事件
  $('input[type="checkbox"]').off('change.singleLimit');
});

关键修改说明 #

• 给#r2中绑定的change事件添加命名空间.singleLimit，避免移除时误删其他可能存在的change事件
• 在#r1的点击事件中，通过off('change.singleLimit')精准移除限制事件，让复选框恢复可多选状态

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