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:400px;
    margin:0 auto;
    border: 1px solid green;
    padding:20px;
    text-align:center;
}
.container input {
    margin:20px;
    padding:25px;
}
}

JavaScript

//Disabling Checkboxes after selecting the max selection using jquery
//http://stackoverflow.com/questions/26083970/disabling-checkboxes-after-selecting-the-max-selection-using-jquery/26084196?noredirect=1#comment40872207_26084196

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

    function GetCheckboxId(input) {
        //takes the checkbox group id from the name question[0][] = 0
        var matches = input.match(/\[(\d+)]/);
        if (matches.length) {
            var num = matches[1];
            return num;
        } else return "";
    }
    
    function CheckIfMaximun(index) {
        /// <summary>
        /// Checks if current checked checkboxes of this group id is equal to global MAX value maxCheckboxesPerGroup
        /// </summary>
        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) {
            /// <summary>
            /// Start by initializing on change events
            /// </summary>
            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);
                            //get the group id
                            var id =...