Skip to main content
adicionou 417 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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/

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.

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/

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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.