Bootstrap单选按钮多选异常咨询：为何无法限制仅选一个？

这种情况我碰到过好多次，大概率是没遵循Bootstrap单选按钮的核心规则，给你列几个最常见的原因，按优先级排查：

• 同组单选按钮的name属性不一致
  这是最最容易犯的错误！HTML原生单选按钮的互斥逻辑，完全靠相同的name值来实现，Bootstrap只是做了样式美化，底层还是依赖原生规则。如果每个单选按钮的name都不一样，浏览器会把它们当成独立选项，自然可以全选。
  举个错误示范：

  <div class="form-check">
    <input class="form-check-input" type="radio" id="opt1" name="groupA">
    <label class="form-check-label" for="opt1">选项1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" id="opt2" name="groupB">
    <label class="form-check-label" for="opt2">选项2</label>
  </div>
  

  正确写法必须让同组的name完全相同：

  <div class="form-check">
    <input class="form-check-input" type="radio" id="opt1" name="radioGroup">
    <label class="form-check-label" for="opt1">选项1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" id="opt2" name="radioGroup">
    <label class="form-check-label" for="opt2">选项2</label>
  </div>
  

• 误把type写成了checkbox
  别笑，真的有人手滑写错！如果你的输入框type是checkbox，那它本质就是复选框，不管套多少Bootstrap样式，都能多选。一定要确认每个单选按钮的type是radio：

  <!-- 错误：type是复选框 -->
  <input class="form-check-input" type="checkbox" id="opt1" name="radioGroup">
  <!-- 正确：type是单选框 -->
  <input class="form-check-input" type="radio" id="opt1" name="radioGroup">
  

• 自定义JS干扰了原生行为
  如果你的页面里有自定义脚本，不小心强制设置了单选按钮的checked属性，或者阻止了原生的点击事件，也可能破坏互斥逻辑。可以先暂时移除所有自定义JS，看看问题是否消失，排查是不是脚本的锅。

• Bootstrap按钮式单选组结构错误
  如果你用的是btn-group实现的按钮式单选组，要确保结构完整：需要把按钮组包裹在btn-group里，加上data-toggle="buttons"，同时原生input要隐藏，靠按钮点击触发选中。正确结构示例：

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="radio" name="btnGroup" id="btnOpt1" checked> 选项1
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="btnGroup" id="btnOpt2"> 选项2
    </label>
  </div>
  

  要是少了data-toggle="buttons"或者name不统一，也会出现多选问题。

先排查前两个原因，这俩占了90%以上的情况，大概率能解决你的问题！

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