JSFiddle - React, Tailwind, and code Playground

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 () {
        if (this.id == "default") {
            var bol = $(this).is(":checked");
            $("input[type=checkbox]").not(this).attr("disabled", bol).attr("checked", false);
        } else {
            var bol = $("input:checked").length >= maxaids;
            $("input[type=checkbox]").not(":checked").attr("disabled", bol);
        }
    });
});