使用Bootstrap 4构建表单时单选按钮允许多选的问题求助

嘿，我一眼就瞅出问题所在啦！你遇到的所有单选框能同时选中的核心原因，是同一语言的单选按钮组没有共用相同的name属性。

问题本质 #

单选按钮的互斥选择功能，完全依赖于同一组内的按钮拥有完全相同的name属性值。你现在的代码里，每个等级的单选按钮name都是独立的（比如Italiano0、Italiano1），浏览器会把它们当成不同的选项组，自然允许同时选中多个。

解决方案 #

给同一语言下的所有6个等级单选按钮设置相同的name，比如意大利语组统一用italiano_level，或者按你的语言索引命名为language0_level。这样浏览器就会识别它们是同一组，强制只能选中一个。

修改后的代码示例（以意大利语组为例） #

<div name="language0" class="container">
  <!-- A1等级 -->
  <div class="form-check-inline">
    <label class="form-check-label" for="ItalianoA1"> Italiano A1</label>
    <input class="form-check-input" type="radio" name="italiano_level" id="ItalianoA1" value="A1">
  </div>
  <!-- A2等级 -->
  <div class="form-check-inline">
    <label class="form-check-label" for="ItalianoA2">A2</label>
    <input class="form-check-input" type="radio" name="italiano_level" id="ItalianoA2" value="A2">
  </div>
  <!-- 后续B1、B2、C1、C2等级的单选按钮，name都设为italiano_level，id和value对应修改即可 -->
</div>

额外说明 #

• 你原来的label和input的关联（for对应id）是正确的，不用修改，只要保证每个单选按钮的id唯一就行。
• 你担心的布局拥挤问题和name属性无关，form-check-inline类已经帮你实现了行内布局，修改name不会影响显示效果。

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