JSFiddle - React, Tailwind, and code Playground
HTML
<div class="num01">
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1">
</div>
<br>
<br><br><br><br><br><br><br><br>
<div class="num02">
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1">
</div>
<br>
<br><br><br><br><br><br><br><br>
<div class="num03">
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1"><br />
<input type="checkbox" value="1">
</div>
JavaScript
$(".num01 input[type=checkbox]").click(function(){
var $count = $(".num01 input[type=checkbox]:checked").length;
var $not = $('.num01 input[type=checkbox]').not(':checked')
if($count >= 3) {
$not.attr("disabled",true);
}else{
$not.attr("disabled",false);
}
});
$(".num02 input[type=checkbox]").click(function(){
var $count = $(".num02 input[type=checkbox]:checked").length;
var $not = $('.num02 input[type=checkbox]').not(':checked')
if($count >= 3) {
$not.attr("disabled",true);
}else{
$not.attr("disabled",false);
}
});
$(".num03 input[type=checkbox]").click(function(){
var $count = $(".num03 input[type=checkbox]:checked").length;
var $not = $('.num03 input[type=checkbox]').not(':checked')
if($count >= 3) {
$not.attr("disabled",true);
}else{
$not.attr("disabled",false);
}
});