JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="chk" value="A"/>A
<input type="checkbox" name="chk" value="B"/>B
<input type="checkbox" name="chk" value="C"/>C
<input type="checkbox" name="chk" value="D"/>D
<input type="checkbox" name="chk" value="E"/>E
<input type="checkbox" name="chk" value="F"/>F
<input type="checkbox" name="chk" value="F"/>G

JavaScript

$("input[name=chk]").change(function(){
    var max= 4;
    if( $("input[name=chk]:checked").length == max ){
        $("input[name=chk]").attr('disabled', 'disabled');
        $("input[name=chk]:checked").removeAttr('disabled');
    }else{
         $("input[name=chk]").removeAttr('disabled');
    }
})