停用复选框组

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

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.