how to block a jquery checkbox

Navigation
2

I would like to know how do I block a checkbox as a bootstrap button since I have it and I make a simple limit check in 2 or only 2 checkbox can be selected. When I select the third checkbox it shows me my error message and selects my checkbox . I would like that when it selects the third checkbox of the error message and does not select 

$('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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
asked by anonymous 12.06.2016 / 04:14

1 answer

2

Boostrap has its own code that runs when you click a checkbox that adds a class active to label . So when total > 2 you have to uncheck the checkbox and remove that class. You can do this: 

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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

jsFiddle: link

    
12.06.2016 / 09:44
Random selections with PHP and MySQL Auto Scroll for Specific View