2

Olá, eu tenho três checkboxes no meu form e gostaria que eu selecionar um os outros dois fossem desmarcados. Eu tentei usar alguns exemplos que achei aqui mas não funcionou como o esperado. Segue o código HTML e o Script que eu tentei usar. Agradeço à quem puder me ajudar.

<div class="form-group">                 
                    <label for="ativo_check" class="col-sm-2 control-label">Ativo</label>
                    <div class="col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input id="ativo_check" name="ativo_check" type="checkbox" value="ativo" 
                                    <?php
                                        if($jogo['flag_ativo']=="1")
                                        {
                                            echo'checked';
                                        }
                                    ?>         
                                >
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">                 
                    <label for="cancelado_check" class="col-sm-2 control-label">Cancelado</label>
                    <div class="col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input id="cancelado_check" name="cancelado_check" type="checkbox" value="cancelado"
                                    <?php
                                        if($jogo['flag_cancelado']=="1")
                                        {
                                            echo'checked';
                                        }
                                    ?>        
                                >
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">                 
                    <label for="finalizado_check" class="col-sm-2 control-label">Finalizado</label>
                    <div class="col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input id="finalizado_check" name="finalizado_check" type="checkbox" value="finalizado"
                                    <?php
                                        if($jogo['flag_finalizado']=="1")
                                        {
                                            echo'checked';
                                        }
                                    ?>        
                                >
                            </label>
                        </div>
                    </div>
                </div>
                <script type="text/javascript" charset="utf-8"> 
                     desmarcaCheckbox("ativo_check", "cancelado_check", "finalizado_check");
                </script>

function desmarcaCheckbox(ativo_check, cancelado_check, finalizado_check) { var ativo = "#" + ativo_check; var cancelado = "#" + cancelado_check; var finalizado = "#" + finalizado_check;

document.write(ativo+"<br>");
document.write(cancelado+"<br>");
document.write(finalizado+"<br>");

$(ativo).click(function () {
    if ($(ativo).prop("checked") === true) {
        alert('Cancelado desmarcado');
        $(cancelado).prop("checked", false);

        alert('Finalizado desmarcado');
        $(finalizado).prop("checked", false);
    }
});

$(ativo).click(function () {

    if ($(cancelado).prop("checked") === true) {
        alert('Ativo desmarcado');
        $(ativo).prop("checked", false);

        alert('Finalizado desmarcado');
        $(finalizado).prop("checked", false);
    }

});

$(ativo).click(function () {
    if ($(finalizado).prop("checked") === true) {
        alert('Cancelado desmarcado');
        $(cancelado).prop("checked", false);

        alert('Ativo desmarcado');
        $(ativo).prop("checked", false);
    }
});

}

1
  • 1
    Como o sérgio falou, não seria mais viável usar o rádio-box? Commented 10/08/2016 às 19:03

1 Resposta 1

4

Acho que em vêz de type="checkbox" precisas de type="radio", e depois tens de mudar todos os name="..." para name="estado" e remover o JavaScript de todo.

Ou seja (exemplo):

<div class="form-group">
    <label for="ativo_check" class="col-sm-2 control-label">Ativo</label>
    <div class="col-sm-10">
        <div class="checkbox">
            <label>
                <input id="ativo_check" name="estado" type="radio" value="ativo" <?php if($jogo[ 'flag_ativo']=="1" ) { echo 'checked'; } ?> >
            </label>
        </div>
    </div>
</div>

<div class="form-group">
    <label for="cancelado_check" class="col-sm-2 control-label">Cancelado</label>
    <div class="col-sm-10">
        <div class="checkbox">
            <label>
                <input id="cancelado_check" name="estado" type="radio" value="cancelado" <?php if($jogo[ 'flag_cancelado']=="1" ) { echo 'checked'; } ?> >
            </label>
        </div>
    </div>
</div>

<div class="form-group">
    <label for="finalizado_check" class="col-sm-2 control-label">Finalizado</label>
    <div class="col-sm-10">
        <div class="checkbox">
            <label>
                <input id="finalizado_check" name="estado" type="radio" value="finalizado" <?php if($jogo[ 'flag_finalizado']=="1" ) { echo 'checked'; } ?> >
            </label>
        </div>
    </div>
</div>

Desta maneira o HTML já se comporta como queres e não precisas de JavaScript. É para este tipo de funcionalidade que os radio existem.


Se por alguma razão que não compreendo, precisares mesmo de fazer isso com JavaScript / jQuery, então podes fazer assim:

var checkboxes = $('.checkbox [type="checkbox"]');
checkboxes.on('change', function() {
    var el = this;
    checkboxes.each(function() {
        if (this != el) this.checked = false;;
    });
});

jsFiddle: https://jsfiddle.net/8b5m4qyx/1/

1
  • 1
    Obrigado pelo retorno, amigo. Eu estava ciente do funcionamento do radio, queria saber mais por que o sistema antigo que o meu cliente usa tem exatamente checkboxes nesse local do form e eu também fiquei curioso pra saber como poderia controlar via javasccript. Commented 10/08/2016 às 20:42

Você deve fazer log-in para responder a esta pergunta.

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