Uncheck other checkboxes when selecting one

Question

Hello, I have three checkboxes in my form and would like me to select one the other two are unchecked. I tried to use some examples I found here but it didn’t work as expected. It follows the HTML code and the Script I tried to use. I thank 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 uncrcaCheckbox(activo_check, cancele_check, finalizado_check) { var active = "#" + active_check; var canceled = "#" + canceled 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);
    }
});

}

Answer 1

I think at the same time type="checkbox" you need to type="radio", and then you have to change all the name="..." for name="estado" and remove Javascript at all.

That is to say (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>

This way the HTML already behaves as you want and you do not need Javascript. It is for this type of functionality that the radio exist.

---

If for some reason I don’t understand, you need even to do this with Javascript / jQuery, so you can do it like this:

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/