<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Multiple Select with Search Option - Tiled Layout </h2> </div> <div class="row"> <div class="multi-check"> <div class="col-sm-3"> <label class="btn btn-default plan" for="coffee"> <div class="bizcontent"> <input class="single-checkbox" type="checkbox" name="coffee" id="coffee" autocomplete="off" value=""> <span class="glyphicon glyphicon-ok glyphicon-lg"></span> <h5>Coffee</h5> </div> </label> </div> <div class="col-sm-3"> <label class="btn btn-default plan" for="tea"> <div class="bizcontent"> <input class="single-checkbox" type="checkbox" name="tea" id="tea" autocomplete="off" value=""> <span class="glyphicon glyphicon-ok glyphicon-lg"></span> <h5>TEA</h5> </div> </label> </div> <div class="col-sm-3"> <label class="btn btn-default plan" for="fruit"> <div class="bizcontent"> <input class="single-checkbox" type="checkbox" name="fruit" id="fruit" autocomplete="off" value=""> <span class="glyphicon glyphicon-ok glyphicon-lg"></span> <h5>Fruit</h5> </div> </label> </div> </div> </div> </div>

.multi-check{margin:20px 0 0 0} .multi-check label.btn-default.active{background-color:#007ba7;color:#FFF} .multi-check label.btn-default{width:90%;border:1px solid #efefef;margin:5px} .multi-check label .bizcontent{width:100%} .multi-check .btn-group{width:90%} .multi-check .btn span.glyphicon{opacity:0} .multi-check .btn.active span.glyphicon{opacity:1}

$(document).ready(function() { $("label").click(function(){ $(this).toggleClass('active'); $(this).siblings().removeClass('active'); }); }); $(function(){ var max = 2; var checkboxes = $('input[type="checkbox"]'); checkboxes.change(function(){ var current = checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); });