Uncheck other checkboxes when selecting one

Navigation
1

Hello, I have three checkboxes in my form and would like me to select one the other two were unmarked. I tried to use some examples I found here but it did not work as expected. Here is the HTML code and Script I tried to use. Thanks to anyone who can help me. 

<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 uncheckCheckbox (active_check, canceled_check, finalized_check) {     var active="#" + active_check;     var canceled="#" + canceled_check;     var finalized="#" + finalized_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);
    }
});

}

    
asked by anonymous 10.08.2016 / 20:59

1 answer

3

I think instead of type="checkbox" need type="radio" , and then you have to change all name="..." to name="estado" and remove JavaScript at all.

That is ( example ): 

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

In this way HTML already behaves as you want and you do not need JavaScript. It is for this type of functionality that radio exists.

If for some reason I do not understand, you need to even do this with JavaScript / jQuery, then you can do this: 

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

jsFiddle: link

    
10.08.2016 / 21:02
Notifications Toast c # Printer Driver is not specified