Limit Checkboxes

by Faisal Khan Janjua

HTML

<div>
	<input type="checkbox" id="cb1" checked />
	<label for="cb1">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb2" checked />
	<label for="cb2">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb3" checked />
	<label for="cb3">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb4" checked />
	<label for="cb4">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb5" />
	<label for="cb5">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb6" />
	<label for="cb6">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb7" />
	<label for="cb7">Check Me</label>
</div>
<div>
	<input type="checkbox" id="cb8" />
	<label for="cb8">Check Me</label>
</div>

CSS

* {
  user-select: none;
}

JavaScript

jQuery(function(){

  function setChecks(){
    currentChked = checkboxes.filter(':checked').length;
    checkboxes.filter(':not(:checked)').prop('disabled', currentChked >= max);
  }

  var max = 4;
  var checkboxes = $('input[type="checkbox"]');
  var currentChked = 4;
  setChecks();
  $(document).on('change','input[type="checkbox"]', function(){
    setChecks();
  });

});