how to block a jquery checkbox

Question

would like to know how do I block a checkbox shaped like a boot of the bootstrap because I have it and do a simple check to limit in 2 or only 2 checkbox can be selected. when I select the third checkbox it shows me my error message and selects mine checkbox. I wish that when he selects himself the third checkbox and the error message is not selected

$('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>

Answer 1

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

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/