Bootstrap btn-group-toggle互斥控制问询：仅一组可处于开启状态

当然可以实现这个需求！你想要的是两个独立的btn-group-toggle组件满足仅能有一组处于开启状态，同时允许两者都处于关闭状态——这个逻辑完全能实现，咱们来一步步修正你的代码。

先分析你原有代码的问题 #

你之前的JavaScript代码里有两个关键问题导致失效：

• 用了$("#option1_on").button('dispose')：这个方法是用来销毁Bootstrap按钮组件的，不是用来切换到关闭状态的，自然不会有视觉效果；
• 直接调用button('toggle')：有时候会因为组件内部状态的关联问题，无法正确触发选中状态的同步更新。

正确实现方案 #

1. 保留你的HTML结构不变

<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
  <label class="btn btn-secondary" id="option1_on">
    <input type="radio" name="options_option1" value="on"> On
  </label>
  <label class="btn btn-secondary" id="option1_off">
    <input type="radio" name="options_option1" value="off"> Off
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
  <label class="btn btn-secondary" id="option2_on">
    <input type="radio" name="options_option2" value="on"> On
  </label>
  <label class="btn btn-secondary" id="option2_off">
    <input type="radio" name="options_option2" value="off"> Off
  </label>
</div>

2. 修正后的JavaScript代码

核心思路是：监听每个组内单选框的变化，当某一组被切换到on时，主动将另一组的off单选框设为选中，并同步Bootstrap按钮的视觉状态，同时避免循环触发事件。

$(function() {
  // 监听option1的单选框变化
  $("#option1 input:radio").change(function() {
    // 如果当前选中的是"on"，强制把option2切换到"off"
    if ($(this).val() === 'on') {
      // 1. 确保表单数据正确：设置option2的off单选框为选中
      $("#option2 input[value='off']").prop('checked', true);
      // 2. 同步视觉状态：给off按钮加上active类，移除on按钮的active类
      $("#option2_off").addClass('active').siblings().removeClass('active');
    }
  });

  // 监听option2的单选框变化
  $("#option2 input:radio").change(function() {
    // 如果当前选中的是"on"，强制把option1切换到"off"
    if ($(this).val() === 'on') {
      $("#option1 input[value='off']").prop('checked', true);
      $("#option1_off").addClass('active').siblings().removeClass('active');
    }
  });
});

3. 优化版（避免重复代码）

如果后续可能扩展更多组，可以把逻辑封装成函数，让代码更简洁：

$(function() {
  // 封装切换其他组状态的函数
  function setOtherGroupToOff(activeGroupId, targetGroupId) {
    $("#" + targetGroupId + " input[value='off']").prop('checked', true);
    $("#" + targetGroupId + "_off").addClass('active').siblings().removeClass('active');
  }

  $("#option1 input:radio").change(function() {
    $(this).val() === 'on' && setOtherGroupToOff('option1', 'option2');
  });

  $("#option2 input:radio").change(function() {
    $(this).val() === 'on' && setOtherGroupToOff('option2', 'option1');
  });
});

为什么这个方案有效？ #

• 直接设置单选框的checked属性，确保表单提交时的数据是正确的；
• 手动添加/移除active类，因为Bootstrap的btn-group-toggle完全依赖这个类来显示选中的视觉状态，单纯设置单选框的checked有时候不会自动触发类的更新；
• 完全符合你的需求：允许两个组都处于off状态，只有当其中一个被设为on时，另一个才会被强制切换到off。

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