JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<form id="frm" action="#">
    <input type="checkbox" id="ch1"><label for="ch1">Checkbox 1</label>  <br />  
    <input type="checkbox" id="ch1"><label for="ch2">Checkbox 2</label> <br />
    <input type="checkbox" id="ch1"><label for="ch3">Checkbox 3</label> <br /> 
    <input type="checkbox" id="ch1"><label for="ch4">Checkbox 4</label>  <br />  
    <input type="checkbox" id="ch1"><label for="ch5">Checkbox 5</label>
</form>

JavaScript

$(function() {
    var chlist = $("#frm input"),
        chn = chlist.length,
        nc, //for not checked
        m = 3; //maximum of checked checboxes 
    chlist.change(function() {
        nc = chlist.not(":checked");
        if (nc.length <= chn - m) {
            nc.attr("disabled", "disabled");
        } else {
            nc.filter("[disabled]").removeAttr("disabled");
        }

    });
});