JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.btn-group {
    margin-top: 20px;
}

JavaScript

$('input[type=checkbox]').on('change', function(e) {
    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');
});