JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="container"><b>Group 1</b>

    <br/>
    <input type='checkbox' name='question[0][]' value='0' />question 00
    <input type='checkbox' name='question[0][]' value='1' />question 01
    <input type='checkbox' name='question[0][]' value='2' />question 02
    <br/><b>Group 2</b>

    <br/>
    <input type='checkbox' name='question[1][]' value='0' />question 00
    <input type='checkbox' name='question[1][]' value='1' />question 01
    <input type='checkbox' name='question[1][]' value='2' />question 02
    <br/><b>Group 3 </b>

    <br/>
    <input type='checkbox' name='question[2][]' value='0' />question 00
    <input type='checkbox' name='question[2][]' value='1' />question 01
    <input type='checkbox' name='question[2][]' value='2' />question 02</div>

CSS

.container {
    width:700px;
    margin:0 auto;
    border: 1px solid green;
    padding:20px;
    text-align:center;
}
.container input {
    margin:20px;
    padding:25px;
}
}

JavaScript

var Checkbox = function (testid) {
    /// <summary>
    /// Checkbox class
    /// </summary>
    var testCheckboxId = testid;
    var maxCheckboxesPerGroup = 2;
    var checkedBoxes = {
        0: [],
        1: [],
        2: []
    };

    function GetCheckboxId(input) {
        var matches = input.match(/\[(\d+)]/);
        if (matches.length) {
            var num = matches[1];
            return num;
        } else return "";
    }

    function CheckIfMaximun(index) {

        var checkedNum = $("input[name='question[" + index + "][]']:checked").length;
        console.log(checkedNum.length);
        console.log(maxCheckboxesPerGroup)
        if (maxCheckboxesPerGroup == checkedNum) {
            return true;
        } else return false;
    }
    return {
        Start: function (checkedBoxes) {
            checkbox.Tools.initializeCheckboxEvents();
        },
        Tools: {
            initializeCheckboxEvents: function () {
                //attaches on change events to all checkboxes depend on the group
                for (index in checkedBoxes) {
                    $("input[name='question[" + index + "][]']").each(function () {
                        console.log(this);
                        $(this).change(function () {

                            //console.log(this.name);
                            //gets the group id
                            var id = GetCheckboxId(this.name);
                            var isMax = CheckIfMaximun(id);

                            console.log(isMax);
                            if (isMax) {
                                checkbox.Tools.DisableCheckbox(id);
                            } else {
                                checkbox.Tools.EnableCheckbox(id);   
                            }
                        });
                    });
                }
            },
            DisableCheckbox: function (checkId) {
                alert(1);
                console.log($("input[name='question[" +...