JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Allow up to three checkboxes to be checked, then disable all checkboxes on page</h2>
<form action="">
<input type="checkbox" name="vehicle" value="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car<br>
<input type="checkbox" name="vehicle" value="spoon">I have a spoon<br>
<input type="checkbox" name="vehicle" value="guitar">I have a guitar<br>
<input type="checkbox" name="vehicle" value="boat">I have a boat<br>
<input type="checkbox" name="vehicle" value="house">I have a house<br>
</form>
JavaScript
var checked = 0;
$('input[type="checkbox"]').click(function() {
var $b = $('input[type=checkbox]');
checked = $b.filter(':checked').length;
//alert('There are [' + checked + '] checked checkboxes');
if (checked > 2) {
$("input:checkbox:not(:checked)").prop('disabled',true);
}else{
$('input[type=checkbox]').prop('disabled',false);
}
});