如何实现Bootstrap checkbox仅允许用户选中单个选项

要实现选中单个选项时其余选项自动取消选中的效果，有两种可直接落地的方案：

• 方案1（优先推荐，无额外冗余逻辑）：直接使用原生单选框组件
  原生<input type="radio">天生具备同name属性下互斥选中的能力，Bootstrap的form-check、form-switch样式完全兼容radio组件，不需要额外写JS控制选中互斥，只需要保留详情区域的显隐逻辑即可。
  同组选项只需要设置相同的name属性，示例代码如下：

<!-- UO1选项 -->
<div class="form-check form-switch" style="display: flex;">
  <label class="form-check-label" for="uo1">UO1</label><br>
  <input class="form-check-input" type="radio" name="uoGroup" id="uo1" value="0" />
  <div id="uo1div" style="display:none">
    <br> TJM = 225 €
  </div>
</div>

<!-- 其他同组选项按相同结构新增即可，示例UO2 -->
<div class="form-check form-switch" style="display: flex;">
  <label class="form-check-label" for="uo2">UO2</label><br>
  <input class="form-check-input" type="radio" name="uoGroup" id="uo2" value="1" />
  <div id="uo2div" style="display:none">
    <br> TJM = 250 €
  </div>
</div>

<script>
// 统一绑定所有同组选项的切换逻辑，不需要为每个选项单独写事件
$('.form-check-input[name="uoGroup"]').change(function() {
  // 先隐藏所有选项的详情区域
  $('div[id$="div"]').hide();
  // 显示当前选中项对应的详情
  $(`#${this.id}div`).show();
});
</script>

• 方案2（必须使用checkbox场景适用）：通过JS控制互斥逻辑
  如果业务要求支持「全部选项都不选」的状态（radio选中后无法手动取消全不选），可以保留checkbox类型，在切换事件中增加同组选项状态重置的逻辑即可。
  给同组checkbox加统一类名方便批量选择，示例代码如下：

<!-- UO1选项 -->
<div class="form-check form-switch" style="display: flex;">
  <label class="form-check-label" for="uo1">UO1</label><br>
  <input class="form-check-input single-check" type="checkbox" id="uo1" value="0" />
  <div id="uo1div" style="display:none">
    <br> TJM = 225 €
  </div>
</div>

<!-- 其他同组选项按相同结构新增即可，示例UO2 -->
<div class="form-check form-switch" style="display: flex;">
  <label class="form-check-label" for="uo2">UO2</label><br>
  <input class="form-check-input single-check" type="checkbox" id="uo2" value="1" />
  <div id="uo2div" style="display:none">
    <br> TJM = 250 €
  </div>
</div>

<script>
$('.single-check').change(function() {
  // 当前项被选中时，取消同组其他所有checkbox的选中状态
  if (this.checked) {
    $('.single-check').not(this).prop('checked', false);
  }
  // 先隐藏所有选项的详情区域
  $('div[id$="div"]').hide();
  // 当前项为选中状态时，显示对应详情
  if (this.checked) {
    $(`#${this.id}div`).show();
  }
});
</script>

注意事项 #

• 不要为每个选项单独编写script块绑定事件，统一给同组元素绑定事件可以大幅减少冗余代码
• 修改表单选中状态时请使用prop()方法，不要用attr()，避免出现DOM属性和页面展示状态不同步的问题
• 如果不想重构原有单选项绑定事件的写法，只需要在你原有change回调的第一行加上$('.form-check-input').not(this).prop('checked', false)即可实现互斥效果，记得同步处理其他选项对应详情区域的隐藏逻辑，避免出现多个详情块同时显示的问题。

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