Deactive Groups of Checkboxes

Question

I have a list of radio buttons that are all separated into groups, specifically school classes in this case.

<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>

Math, in this example, has multiple options, being High Level, Standard Level, and Studies. I would like to know of a way in which I can make it so that when one is selected, the others are deactivated, but only for the same class. 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.

Answer 1

If you use same name and different values for each set of radio buttons, you will get what you need.

Code:

<?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 This setup satisfies all of your described conditions:

You said 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.

So, with radio button, class[math] group, Only one type of class can be selected at one time. Math & Physics selections do not effect each other or any other class.

But, in case of Radio buttons, you should also consider giving users to select an option of No Class, because once any radio button is selected in one group, it can't be unselected (unlike checkboxes can be unchecked). So you can put some option like No Class

If you want to USE checkboxes, see this question: How to disable enable a checkbox based on another checkbox?

This question and the accepted answer uses jQuery and has a similar requirements like you (tonnes of groups), but is dealing with only two checkboxes in each group.

Answer 2

I recommend you to read the notes over at MDN: https://developer.mozilla.org/en-US/docs/HTML/Element/Input

About type="radio" they say the following:

You must use the value attribute to define the value submitted by this item.

Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.