Search code examples
javascriptjqueryformscheckboxclient-side-validation

jQuery Validate - Checkbox Group ONLY ONE can be checked


I'm seeing a LOT of "at least one needs to be checked", but I'm not seeing any solutions on how to limit a checkbox group to only ONE can be checked.

EDIT: 3/2/17 # 9:20am

Why not a radio button?

Here's why: This particular group of checkboxes lives inside a larger group of checkboxes that only require you to have at least one checked. I need to retain THAT rule, but also apply the rule, in this specific group, that only ONE of these can be selected - yet still maintain the overall group rule that at least one must be selected. Here's some markup:

HTML:

<div class="checkbox-group">
     <label><input type="checkbox" id="A" name="atLeastOne" value="A"> A</label>
     <label><input type="checkbox" id="B" name="atLeastOne" value="B"> B</label>
     <label><input type="checkbox" id="C" name="atLeastOne" value="C"> C</label>
     <label><input type="checkbox" id="D" name="atLeastOne" value="D"> D</label>
          <div class="checkbox-group">
               <label><input type="checkbox" id="E" name="onlyOne" value="E"> E</label>
               <label><input type="checkbox" id="F" name="onlyOne" value="F"> F</label>
               <label><input type="checkbox" id="G" name="onlyOne" value="G"> G</label>
          </div>
     <label><input type="checkbox" id="H" name="atLeastOne" value="H"> H</label>
</div>

Hopefully this makes more sense than my original question.


Solution

  • If you want that only one option can be selected that rather use a radio button instead.

    <input name="field" type="radio" />