Disable checkboxes after a certain number are checked

Question

As the title explains, My code should disable a checkbox when the user selects a certain number.

The code works and does disable a checkbox.

But the problem is the text that changes isn't disabled. Here's my code:

let $compare = $(".visible");
        $compare.on("click", (event) => {
             if ($('input:checked').length < 3) {
                $(event.currentTarget).text($(event.currentTarget).text() === "Item added" ? "Compare" : "Item added");

                $(event.currentTarget).addClass("visible");

                     $("input[type=checkbox]").removeAttr("disabled");

            }
            else {
                  $("input[type=checkbox]").prop("disabled", "disabled");
                $("input[type=checkbox]:checked").removeAttr("disabled");
                event.currentTarget.checked = false;
            }
        })

No errors and the code works to the point it disables a checkbox. But the text still changes even if the checkbox is disabled.

heres the function that displays the data into html:




 const displayOutputHome = (games, hasCheckbox) => {

        let output = "";
        var x = 0;
        games.forEach(game => {

            if (game.Type === "Coming Soon") {

                x++;

                let ratingDiv = $("<div class='rating'></div>");

                for (var i = 0; i < game.Rating; i++) {
                    ratingDiv.append('<span class="fa fa-star checked"></span>');
                }
                for (var i = game.Rating; i < 5; i++) {
                    ratingDiv.append('<span class="fa fa-star"></span>');
                }

                output += `

                    <li>
    <div class=""><input name="gameSelected" id="togg` + x + `" type="checkbox"><label for="togg` + x + `" class="${hasCheckbox ? 'visible' : 'invisible'}">Compare</label></div></li>
    <li><a class="newGame" href=${game.link}?id=${game.ID}><img class="frontGames" src="${game.image}" alt="gameImage">
              <p><b>Name:</b>${game.Name}<br>
                <b>Release Date:</b>${game.ReleaseDate}</br>
                <b>Genres:</b>${game.Genres}</br>
                <b>Retail Price:</b>${game.RetailPrice}</br>

        </li>`;

            }
        })
        return output;

    }

Answer 1

This is a simple way to get the job done, but with a slightly different approach.

Once you've reached the number checked that is desired, then you disable the rest and only allow 'unchecking' items.

Then if one is unchecked and you are below the threshold, then all of the items are re-enabled and are available for checking.

Hope this helps! Code below -

HTML:

<div>
    <input type="checkbox" name="check1" value="check1"  /> Check 1 
</div>
<div>
    <input type="checkbox" name="check2" value="check2"  /> Check 2 
</div>
<div>
    <input type="checkbox" name="check3" value="check3"  /> Check 3 
</div>
<div>
    <input type="checkbox" name="check4" value="check4"  /> Check 4 
</div>
<div>
    <input type="checkbox" name="check5" value="check5"  /> Check 5 
</div>
<div>
    <input type="checkbox" name="check6" value="check6"  /> Check 6
</div>

JavaScript / jQuery:

$("input[type=checkbox]").on("click", function () {
    var count = $("input[type=checkbox]:checked").length;
    if (count < 3) {  // we only want to allow 3 to be checked here.
        $("input[type=checkbox]").removeAttr("disabled");
        // re-enable all checkboxes
    } else {
        $("input[type=checkbox]").prop("disabled","disabled");
        // disable all checkboxes
        $("input[type=checkbox]:checked").removeAttr("disabled");
        // only enable the elements that are already checked.
    }
});

JS Fiddle: https://jsfiddle.net/gfdata/0sh4p2ce/7/

I've updated my JS Fiddle to work with a dataset that constantly changes. I will check out your edits...

new Fiddle: https://jsfiddle.net/gfdata/0sh4p2ce/27/