How to limit the amount of checked boxes to 1

Question

So I have a few lists of checkboxes, all with the a slightly different class of single-check with a number on the end indicating which list they're in, since I'm not using radio buttons. How would I go about making it so that any checkbox that is in the same class can't be checked if another checkbox in that class is already checked?

Thanks

Why aren't you using radio buttons? That's what they're for... — nrabinowitz, Jun 02 '16 at 19:32
Is there any reason you aren't using radio buttons for this? — Rion Williams, Jun 02 '16 at 19:32
Possible double answer http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group — Zoran Pandovski, Jun 02 '16 at 19:32
is simply unchecking all others with the same class an option? Or does the first checked box have to block the others? — yezzz, Jun 02 '16 at 19:36
USe radio button and style them to look like checkbox. The only reason for radio button's existence is to help you select single option. Please don't take it away from them :) — Vatsal, Jun 02 '16 at 20:08

score 2 · Accepted Answer · answered Jun 02 '16 at 19:37

2

Using jQuery.not when a checkbox is clicked, you could set the checked property on all the other checkboxes in that group, to false (meaning they won't be checked).

$(function() {
    $(".myCheckboxInGroup1").on("click", function() {
        $(".myCheckboxInGroup1").not(this).prop("checked", false);
    });
});

Example: http://codepen.io/Gigabyte-Giant/pen/wWavZj

answered Jun 02 '16 at 19:37

Brynden

35,463
2
15
21

If there's not a common class, use the selector `input[type="checkbox"][name="whatever"]` – Blazemonger Jun 02 '16 at 19:41

score 0 · Answer 2 · answered Jun 02 '16 at 19:54

function howtoreadresults(){
   var r = [];
   $('input[type=checkbox]:checked').each(function(i,o){
      r.push($(o).attr('group')+'='+$(o).val());
   });
   return r;
}

$('input[type=checkbox]').change(function(e){
   $('[group='+$(this).attr('group')+']:checked').not($(this)).prop('checked',false);
   console.log(howtoreadresults());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<input type='checkbox' group='cars' value='red' />
<input type='checkbox' group='cars' value='blue' />
<input type='checkbox' group='cars' value='green' />
<input type='checkbox' group='bike' value='red' />
<input type='checkbox' group='bike' value='blue' />
<input type='checkbox' group='bike' value='green' />

also, i suggest you to change your title to "how to replace radio buttons by checkboxes ?" — christian, Jun 02 '16 at 19:56

How to limit the amount of checked boxes to 1

2 Answers2