点击一个Checkbox时禁用其他Checkbox的技术实现求助

我明白你已经被这个问题困扰一周了，别着急，我们来一步步解决它——你想要的是点击某个Checkbox后，禁用当前Accordion面板里的其他Checkbox（而不是仅仅取消它们的选中状态），下面是调整后的完整方案：

问题分析 #

你现有的代码是把页面上所有其他Checkbox的checked设为false，这是单选逻辑，但不符合你“禁用其他”的需求；另外，全局选择$(':checkbox')会影响页面上所有Checkbox，如果有多个Accordion组会互相干扰，我们需要限定在当前面板内操作。

修改后的完整代码 #

HTML（仅移除Checkbox上的onclick属性，避免重复绑定事件） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">MEDIA</button>
<div class="panel">
  <p><input type="checkbox" name="News" id="News" value="News" class="regular-checkbox" /> News</p>
  <p><input type="checkbox" name="OfficialStatement" id="OfficialStatement" value="OfficialStatement" class="regular-checkbox" /> Official Statements</p>
  <p><input type="checkbox" name="Speeches" id="Speeches" value="Speeches" class="regular-checkbox" /> Speech</p>
  <p><input type="checkbox" name="PressRelease" id="PressRelease" value="PressRelease" class="regular-checkbox" /> Press Release</p>
  <p><input type="checkbox" name="Communiques" id="Communiques" value="Communiques" class="regular-checkbox" /> Communique</p>
  <p><input type="checkbox" name="PressConference" id="PressConference" value="PressConference" class="regular-checkbox" /> Press Conference</p>
  <p><input type="checkbox" name="Interviews" id="Interviews" value="Interviews" class="regular-checkbox" /> Interviews</p>
  <p><input type="checkbox" name="SuccessStories" id="SuccessStories" value="SuccessStories" class="regular-checkbox" /> Success Stories</p>
  <p><input type="checkbox" name="SocialMedia" id="SocialMedia" value="SocialMedia" class="regular-checkbox" /> Social Media</p>
  <p><input type="checkbox" name="PressContact" id="PressContact" value="PressContact" class="regular-checkbox" /> Press Contacts</p>
</div>

JavaScript（调整Checkbox逻辑，限定在当前面板内操作） #

$(function() {
  // 给所有面板内的Checkbox绑定点击事件
  $('.panel :checkbox').click(function() {
    const $currentCheckbox = $(this);
    // 获取当前Checkbox所在面板内的所有Checkbox
    const $panelCheckboxes = $currentCheckbox.closest('.panel').find(':checkbox');

    if ($currentCheckbox.is(':checked')) {
      // 选中时：禁用当前面板内的其他Checkbox
      $panelCheckboxes.not($currentCheckbox).prop('disabled', true);
    } else {
      // 取消选中时：恢复当前面板内所有Checkbox的可用状态
      $panelCheckboxes.prop('disabled', false);
    }

    // 执行你的filter筛选函数
    filter($currentCheckbox.val());
  });
});

// 原有的Accordion折叠逻辑保持不变
const acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

关键改进点 #

1. 限定操作范围：使用closest('.panel')找到当前Checkbox所在的面板，只操作该面板内的Checkbox，避免影响其他Accordion组；
2. 实现禁用逻辑：通过prop('disabled', true/false)来控制Checkbox的禁用状态，而不是仅仅修改选中状态；
3. 统一事件绑定：移除Checkbox上的onclick属性，在jQuery事件中统一调用filter函数，避免事件执行顺序冲突；
4. 状态回滚：当取消选中当前Checkbox时，自动恢复其他Checkbox的可用状态，提升用户体验。

补充：如果你实际需要的是“单选逻辑”（仅允许选一个，其他自动取消选中） #

如果你的需求表述有偏差，实际是想实现同一面板内只能选一个Checkbox（类似Radio按钮的效果），可以把Checkbox的点击逻辑改成这样：

$(function() {
  $('.panel :checkbox').click(function() {
    const $currentCheckbox = $(this);
    const $panelCheckboxes = $currentCheckbox.closest('.panel').find(':checkbox');

    if ($currentCheckbox.is(':checked')) {
      // 选中时：取消当前面板内其他Checkbox的选中状态
      $panelCheckboxes.not($currentCheckbox).prop('checked', false);
    }

    filter($currentCheckbox.val());
  });
});

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