2

Tenho esses 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>

Ao marcar um checkbox com o id = ok eu não consiga marcar os outros dois checkbox e fazer a mesma coisa com os outros checkbox, ou seja só vou conseguir marcar se tiver tudo desmarcado se um deles tiver marcado os outros travam

eu tentei isso não deu certo

$(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");
  }
}   

alguém pode me dizer o que esta errando, estou usando a biblioteca jquery.v1.9.1.

2
  • 4
    Porque não usa Radio buttons? w3schools.com/html/tryit.asp?filename=tryhtml_radio
    – Miguel
    Commented 21/07/2016 às 15:19
  • @Miguel É um padrão estranho mesmo com botões radio. O que ele quer é desabilitar as escolhas uma vez que uma foi feita. Não consigo imaginar um formulário no qual isso faça sentido. Se a ideia é um elemento que, ao ser clicado, mude o estado da aplicação, talvez seja melhor um botão ou um link mesmo. Commented 22/07/2016 às 18:52

2 Respostas 2

5

Semanticamente o mais correto é usar input type="radio". Esse tipo de input escolhe por defeito só um, a regra é que todos têm de ter o mesmo name. A única coisa que esse tipo não permite é desmarcar todos.

Se precisas dessa funcionalidade podes usar assim com 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/

1
  • A princípio, eu sugeriria isso, mas me parece que o que ele quer é desabilitar as outras opções, como no jsFiddle da resposta do Guerra. Só acho isso um padrão muito esquisito. Commented 22/07/2016 às 18:55
4

Você poderia colocar uma classe pra agrupar esses checkbox que você quer trabalhar dai ficaria assim:

    $(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: aqui

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .