How to make it impossible to select other checkboxes when selecting a checkbox?

Asked

Viewed 6,499 times

2

I have these 3 checkbox 

<td style="background-color: #D6FAFA"><input type="checkbox" name="box2" id="ok" /></td>
<td style="background-color: #D6FAFA"><input type="checkbox" name="box2" id="nok"/></td>
<td style="background-color: #D6FAFA"><input type="checkbox" name="box2" id="na"/></td>

By checking a checkbox with id = ok I can’t check the other two checkbox and do the same thing with the other checkbox, I’ll only be able to check if I have everything unchecked if one of them has checked the other hangs

I tried it didn’t work out

$(function() {
  enable_cb();
  $("#ok").click(enable_cb);
  $("#nok").click(enable_cb);
  $("#na").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("#nok").attr("disabled",true);
    $("#na").attr("disabled",true);
  } else {
     $("#nok").removeAttr("disabled");    
     $("#na").removeAttr("disabled");
  }
}

can anyone tell me what is wrong, I am using jquery library.v1.9.1.

jquery html
  • 4

    Why not use Radio Buttons? http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

  • @Miguel It is a strange pattern even with radio buttons. What he wants is to disable the choices once one has been made. I can’t imagine a form that makes sense. If the idea is an element that, when clicked, changes the state of the application, maybe it is better to have a button or a link.

2 answers

5

Semantically the most correct is to use input type="radio". This type of input chooses by default only one, the rule is that everyone has to have the same name. The only thing this guy won’t allow is to clear everyone.

If you need this feature you can use it with type="checkbox":

var inputs = $('[type="checkbox"]'); // colocar os inputs em cache
inputs.on('click', function() { // juntar auscultador de evento
    inputs.get().forEach(function(el) { // iterar com a array nativa
        el.checked = el == this && this.checked; // marcar ou desmarcar o elemento iterado
    }, this);
});

jsFiddle: https://jsfiddle.net/cfjpkkey/

  • At first, I would suggest this, but it seems to me that what he wants is to disable the other options, as in the jsFiddle of the War response. I just think it’s a really weird pattern.

4

You could put a class to group these checkboxes that you want to work from there would look like this:

    $(function(){
       $('input.checkgroup').click(function(){
          if($(this).is(":checked")){
             $('input.checkgroup').attr('disabled',true);
             $(this).removeAttr('disabled');
          }else{
             $('input.checkgroup').removeAttr('disabled');
          }
       })
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="checkgroup" id="ok"/>
    <input type="checkbox" class="checkgroup" id="nok"/>
    <input type="checkbox" class="checkgroup" id="na"/>

Fiddle: here

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.