如何阻止Bootstrap手风琴点击特定按钮区域时触发切换

核心问题是：嵌套在Bootstrap手风琴按钮内的复选框（包括其关联的label）被点击时，事件会向上冒泡到按钮元素，触发手风琴的展开/折叠逻辑。之前尝试的stopPropagation()没生效，是因为没处理label的点击事件——点击label文字同样会触发外层按钮的事件。

解决方案（无需修改HTML，仅调整JS） #

在原有JS基础上，给复选框和对应的label添加事件冒泡阻止逻辑，就能在保留样式和复选框功能的前提下解决问题：

修改后的index.js代码：

document.querySelectorAll('input.option').forEach(option => {
  const subOptions = option.closest('li').querySelectorAll('input.subOption');
  const label = option.closest('label');

  // 点击复选框时，阻止事件冒泡到手风琴按钮
  option.onclick = function(e) {
    e.stopPropagation();
    subOptions.forEach(subOption => {
      subOption.checked = this.checked;
    });
  };

  // 点击label文字时，同样阻止事件冒泡
  label.onclick = function(e) {
    e.stopPropagation();
  };

  // 保留原有子选项联动逻辑
  subOptions.forEach(subOption => {
    subOption.onclick = function() {
      const checkedCount = option.closest('li').querySelectorAll('input.subOption:checked').length;
      option.checked = checkedCount > 0;
      option.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
    };
  });
});

原理说明 #

• Bootstrap手风琴的折叠逻辑绑定在按钮元素的click事件上，当点击复选框或label时，事件会向上冒泡到按钮，触发折叠。
• 通过在复选框和label的click事件中调用e.stopPropagation()，可以阻止事件继续向上传递，从而避免触发手风琴的折叠/展开。
• 完全保留原有HTML结构，不会破坏任何样式，新增代码量极少。

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