JSFiddle - React, Tailwind, and code Playground

HTML

<div class="multiCheckboxes">
    <input id="1" type="checkbox" value="1">
    <label for="1">Option One</label>
    <br>
    <input id="2" type="checkbox" value="2">
    <label for="2">Option Two</label>
    <br>
    <input id="3" type="checkbox" value="3">
    <label for="3">Option Three</label>
    <br>
    <input id="4" type="checkbox" value="4">
    <label for="4">Option Four</label>
    <br>
    <input id="5" type="checkbox" value="5">
    <label for="5">Option Five</label>
    <br>
    <input id="6" type="checkbox" value="6">
    <label for="6">Option Six</label>
    <br>
    <input id="7" type="checkbox" value="7">
    <label for="7">Option Seven</label>
    <br>

CSS

.multiCheckboxes {

    border: 1px solid #3C3C3C;

    display: inline-block;

    left: 9px;

    overflow: auto;

    padding: 1%;

    width: 80%;

    z-index: 999;

}

.multiCheckboxes label {

    float: none !important;

    font-size: 0.9em;

    width: 7.6em !important;

}

JavaScript

$('input:checkbox').on('change', function () {
    var nightLifeLimit = $('input:checkbox:checked').length;
    if (nightLifeLimit ==2) {
        $('input:checkbox').each(function () {
            if ($(this).is(':checked')) {
                return;
            } else {
                $(this).prop('disabled', true);
            }
        });
    } else {
        $('input:checkbox').each(function () {
            $(this).prop('disabled', false);
        });
    }
});