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"他们会说以下内容：

您必须使用value属性来定义由此提交的值   项目

具有相同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，并且有类似的要求（吨数），但每组只处理两个复选框。

停用复选框组

2 个答案: