如何在Bootstrap表单中创建单选按钮组实现餐厅吸烟/非吸烟区选择

问题根因 #

你遇到的单选按钮无法选中、样式异常问题有两个核心原因：

1. 你使用的data-toggle="buttons"语法仅适用于Bootstrap 3版本，Bootstrap 4及以上版本已经废弃该属性，改用专用类实现单选按钮组效果
2. 你当前的代码没有隐藏原生单选框，且label和单选框没有做正确的属性绑定，导致点击逻辑不生效

修复后代码（适配Bootstrap 4/5版本，可直接复用） #

<div class="form-group row">
  <label class="col-12 col-md-2">Section</label>
  <div class="col-md-10">
    <div class="btn-group" role="group">
      <!-- 非吸烟区单选项 -->
      <input type="radio" class="btn-check" name="sectionOptions" id="nonSmoking" autocomplete="off" checked value="non-smoking">
      <label class="btn btn-success" for="nonSmoking">Non-Smoking</label>
      <!-- 吸烟区单选项 -->
      <input type="radio" class="btn-check" name="sectionOptions" id="smoking" autocomplete="off" value="smoking">
      <label class="btn btn-danger" for="smoking">Smoking</label>
    </div>
  </div>
</div>

核心注意点 #

• 给每个单选框添加btn-check类，Bootstrap会自动隐藏原生单选框，同时自动绑定选中状态的样式切换
• 单选框的id属性必须和对应label的for属性完全一致，才能触发点击按钮选中对应选项的逻辑
• 同一组的所有单选框name属性必须完全相同，才能保证同一时间仅能选中一个选项
• 如果仍在使用Bootstrap 3版本，保留你原有代码结构，确保提前引入jQuery和Bootstrap JS依赖即可正常使用data-toggle="buttons"属性

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