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/