Question

我有一个单选按钮列表，这些按钮都被分成组，特别是在这种情况下的学校班级。

<label class="control-label" for="optionsCheckboxList">Math</label> 
<div class="controls"> 
    <label class="checkbox"> 
     <input type='checkbox' name='class[math1]' value='1' id="mathhl"> 
     High Level 
    </label> 
    <label class="checkbox"> 
     <input type='checkbox' name='class[math2]' value='1' id="mathsl"> 
     Standard Level 
    </label> 
    <label class="checkbox"> 
     <input type='checkbox' name='class[math3]' value='1' id="mathst"> 
     Studies 
     </label> 
</div> 
<hr> 
<label class="control-label" for="optionsCheckboxList">Physics</label> 
<div class="controls"> 
    <label class="checkbox"> 
     <input type="checkbox" name='class[phys1]' value='1' id="physhl"> 
     High Level 
    </label> 
</div> 

在本例中，数学有多个选项，即高级，标准级和研究。我想知道一种方法，我可以做到这一点，以便当一个人被选中时，其他人被停用，但仅限于同一个班级。因此，例如，如果有人选择数学高级，另外两个数学课程被禁用（直到它未被选中），但物理学不受影响。

请注意，我有很多类，所以我想要一些适用于许多复选框组的东西。

Answer 1

，我建议你在在MDN阅读笔记：https://developer.mozilla.org/en-US/docs/HTML/Element/Input

关于type="radio"他们说以下内容：

必须使用值属性来定义提交此 项的值。

与name属性具有相同值的单选按钮在 中是相同的“单选按钮组”。一次只能选择一个组中的一个单选按钮 。

Answer 2

如果使用相同名称和每组单选按钮不同值，你会得到你所需要的。

代码：

<?php 
if(isset($_POST["submit"])){ 
    echo "You selected:<br />\r\n<pre>"; 
    print_r($_POST); 
    echo "</pre>"; 
} 
?> 
<form action="" method="POST"> 
<label class="control-label" for="optionsCheckboxList">Math</label> 
<div class="controls"> 
    <label class="checkbox"> 
     <input type='radio' name='class[math]' value='hl' id="mathhl"> 
     High Level 
    </label> 
    <label class="checkbox"> 
     <input type='radio' name='class[math]' value='sl' id="mathsl"> 
     Standard Level 
    </label> 
    <label class="checkbox"> 
     <input type='radio' name='class[math]' value='st' id="mathst"> 
     Studies 
     </label> 
</div> 
<hr> 
<label class="control-label" for="optionsCheckboxList">Physics</label> 
<div class="controls"> 
    <label class="checkbox"> 
     <input type="radio" name='class[phys]' value='hl' id="physhl"> 
     High Level 
    </label> 
</div> 
<hr> 
<input type="submit" name="submit" value="Submit" /> 
</form> 

Live Demo 此设置满足您的所有描述的条件：

你说So, for example, if someone chooses Math High Level, the other two math classes are disabled (until it is unchecked), but Physics is unaffected.

Please note, I have a ton of classes, so I'd like something that works for many groups of check boxes.

所以，用单选按钮，class[math]组，只有可以选择一种类型的课程 一次。数学&物理选择不会影响彼此或任何其他类。

但是，在单选按钮的情况下，您还应该考虑让用户选择No Class的选项，因为一旦在一个组中选择了单选按钮，就不能取消选中（与复选框不同）。所以，你可以把喜欢No Class

一些选项，如果你想使用复选框，看到了这个问题：How to disable enable a checkbox based on another checkbox?

这个问题和接受的答案使用jQuery和有类似的需求，如您（组吨），但只处理每个组中的两个复选框。