HTML checkbox - allow to check only one checkbox

Question

I have some checkboxes in each row in my table. Each one checkbox has name='myName' because I want to select only one checkbox in each row. But something I'm missing because I'm able to check all of them:

enter image description here

but I want that result:

enter image description here

what am I missing here ?

It's not how checkboxes work, if you want to make them work like this you should use javascript to handle that. — VahidNaderi, Nov 09 '13 at 15:08

score 25 · Accepted Answer · answered Nov 09 '13 at 15:07

25

The unique name identifier applies to radio buttons:

<input type="radio" />

change your checkboxes to radio and everything should be working

answered Nov 09 '13 at 15:07

silicakes

6,364
3
28
39

and alsob that code can be used http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group/9709425#9709425 – Tony Nov 09 '13 at 15:21
Unique name you can identify to Checkbox also.. Check http://stackoverflow.com/a/39405214/2545270 – Nisar Sep 09 '16 at 06:35

score 2 · Answer 2 · answered Nov 09 '13 at 15:13

Checkboxes, by design, are meant to be toggled on or off. They are not dependent on other checkboxes, so you can turn as many on and off as you wish.

Radio buttons, however, are designed to only allow one element of a group to be selected at any time.

References:

Checkboxes: MDN Link

Radio Buttons: MDN Link

score 1 · Answer 3 · edited Jul 25 '16 at 10:46

1

 $(function () {
     $('input[type=checkbox]').click(function () {
         var chks = document.getElementById('<%= chkRoleInTransaction.ClientID %>').getElementsByTagName('INPUT');
         for (i = 0; i < chks.length; i++) {
            chks[i].checked = false;
         }
         if (chks.length > 1)
            $(this)[0].checked = true;
     });
 });

edited Jul 25 '16 at 10:46

Pang

9,564
146
81
122

answered Dec 16 '15 at 09:44

Bhanu Pratap

1,635
17
17

score 0 · Answer 4 · answered Feb 16 '17 at 15:57

sapSet = mbo.getThisMboSet()
sapCount = sapSet.count()
saplist = []

if sapCount > 1:
   for i in range(sapCount):`enter code here`
     defaultCheck = sapSet.getMbo(i)
     saplist.append(defaultCheck.getInt("HNADEFACC"))
   defCount = saplist.count(1)
   if defCount > 1:
      errorgroup = " Please Note: you are allowed"
      errorkey = "  only One Default Account"
   if defCount < 1:
      errorgroup = " Please enter "
      errorkey = "  at leat One Default Account"
else:
   mbo.setValue("HNADEFACC",1,MboConstants.NOACCESSCHECK)

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. — Donald Duck, Feb 16 '17 at 16:03

score 0 · Answer 5 · answered Oct 25 '17 at 15:36

$('#OvernightOnshore').click(function () {
    if ($('#OvernightOnshore').prop("checked") == true) {
        if ($('#OvernightOffshore').prop("checked") == true) {
            $('#OvernightOffshore').attr('checked', false)
        }
    }
})

$('#OvernightOffshore').click(function () {
    if ($('#OvernightOffshore').prop("checked") == true) {
        if ($('#OvernightOnshore').prop("checked") == true) {
            $('#OvernightOnshore').attr('checked', false);
        }
    }
})

This above code snippet will allow you to use checkboxes over radio buttons, but have the same functionality of radio buttons where you can only have one selected.

HTML checkbox - allow to check only one checkbox

5 Answers5

Linked