2

gostaria de saber como faço para bloquear um checkbox em forma de botao do bootstrap pois tenho ele e faço uma simples verificação de limitar em 2 ou seja somente 2 checkbox podem ser selecionados. quando eu seleciono o terceiro checkbox ele me mostra minha mensagem de erro e seleciona meu checkbox. gostaria que quando ele seleciona-se o terceiro checkbox desse a mensagem de erro e não seleciona-se

$('input[type=checkbox]').on('change', function () {
    var total = $('input[type=checkbox]:checked').length;

   
    $(this).closest('.hovereffect').toggleClass('clic');

    if(total > 2){

    	$('input[type=checkbox]').attr('disabled', true);
    	alert("Você ultrapassou seu limite");
    	return;
    }

    
});
.btn-group{
  margin-top:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>

</div>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

1 Resposta 1

2

O Boostrap tem o seu próprio código que corre quando clicas num checkbox que adiciona uma classe active ao label. Assim, quando total > 2 tens de desmarcar o checkbox e remover essa classe. Podes fazer assim:

var $this = $(this);
if (total > 2) {
    $this.prop('checked', false);
    $this.closest('label').removeClass('active');
    alert("Você ultrapassou seu limite");
    return;
}

$('input[type=checkbox]').on('change', function(e) {
    e.preventDefault();
    var total = $('input[type=checkbox]:checked').length;
    var $this = $(this);
    if (total > 2) {
        $this.prop('checked', false);
        $this.closest('label').removeClass('active');
        alert("Você ultrapassou seu limite");
        return;
    }
    $(this).closest('.hovereffect').toggleClass('clic');
});
.btn-group{
  margin-top:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>
  <label class="btn btn-primary check">
    <input type="checkbox" autocomplete="off"> Selecionar
  </label>

</div>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

jsFiddle: https://jsfiddle.net/k17hevw7/

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 .