JSFiddle - React, Tailwind, and code Playground

by kenfly51

HTML

<input type="checkbox" group="checkboxes" name="other" class="other" id="one"><label for="one">One</label><br />
<input type="checkbox"  group="checkboxes" name="other" class="other" id="two"><label for="two">Two</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="three"><label for="three">Three</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="four"><label for="four">Four</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="five"><label for="five">Five</label><br />
<input group="checkboxes" type="checkbox" checked="checked" name="other" id="default"><label for="default">Default</label>

JavaScript

$('.other').change(function(){
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
});

$(document).ready(function(){
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function(){
        
        var checkcount = $("input:checked").length;
        var bol = checkcount >= maxaids;
        $("input[type=checkbox]").not(":checked").attr("disabled",bol);
        if(checkcount == 0){
            console.log(checkcount);
            $('#default').prop('checked', true);

        }
    });
});