Possible to add CSS to some JS to style disabled checkbox text

Question

I'm using a bit of JS to limit the amount of checkboxes that a user can select in a form I am working on. With this JS, once the limit of 2 is reached, the remaining checkboxes are greyed out.

However, I am using other JS that removes the actual checkbox so that I can style the form anyway I like, so now when the limit is reached, there is no visual cue that the remaining choices cannot be selected.

I am hoping there is a way to style the text in the remaining choices to grey out when the limit of choices is reached.

Here is the JS I am using that greys out the checkboxes. Can I add a css style to this to do what I need?

---

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

---

HTML for the checkbox section of the form

---

<fieldset>
        <legend>Choose color(s) <small class="fineprint">*choose up to two</small></legend>
            <ul>
                <li><input type="checkbox" class="checkbox" id="bright_green" value="Bright Green" name="board_colors[]" title="Please choose a color(s)" required minlength="1">
                    <label for="bright_green">Bright Green</label></li>

                <li><input type="checkbox" class="checkbox" id="teal_blue" value="Teal Blue" name="board_colors[]">
                    <label for="teal_blue">Teal Blue</label></li>

                <li><input type="checkbox" class="checkbox" id="sea_blue" value="Sea Blue" name="board_colors[]">
                    <label for="sea_blue">Sea Blue</label></li>

                <li><input type="checkbox" class="checkbox" id="purple" value="Purple" name="board_colors[]">
                    <label for="purple">Purple</label></li>

                <li><input type="checkbox" class="checkbox" id="magenta_dark_pink" value="Magenta Dark Pink" name="board_colors[]">
                    <label for="magenta_dark_pink">Magenta/Dark Pink</label></li>

                <li><input type="checkbox" class="checkbox" id="watermelon_red" value="Watermelon Red" name="board_colors[]">
                    <label for="watermelon_red">Watermelon Red</label></li>

                <li><input type="checkbox" class="checkbox" id="true_red" value="True Red" name="board_colors[]">
                    <label for="true_red">True Red</label></li>

                <li><input type="checkbox" class="checkbox" id="orange" value="Orange" name="board_colors[]">
                    <label for="orange">Orange</label></li>
            </ul>       
                <span><label for="board_colors[]" class="error"></label></span>
    </fieldset>

Answer 1

I'd personally suggest adding a class to the parent <li> element and then styling the text of the <label> using CSS:

$('input:checkbox[name="board_colors[]"]').on('change', function () {
    // cache your inputs for repeated access:
    var inputs = $('input[type="checkbox"][name="board_colors[]"]'),
        // using the cached jQuery object, filtering for the :checked elements:
        nightLifeLimit = inputs.filter(':checked').length;
    // iterating over each of the elements:
    inputs.each(function () {
        // 'this' is the current input:
        $(this)
        // disabling if it's not checked *and* if the limit is reached:
        .prop('disabled', !this.checked && nightLifeLimit == 2)
        // moving to the closest 'li' ancestor:
        .closest('li')
        // adding the class if the checkbox is disabled, removing if not:
        .toggleClass('disabled', this.disabled);
    });
});

JS Fiddle demo.

That said, if you move the <input /> elements before the <label> elements, giving:

<fieldset>
    <legend>Choose color(s) <small class="fineprint">*choose up to two</small></legend>
    <ul>
        <li>
            <input type="checkbox" class="checkbox" id="bright_green" value="Bright Green" name="board_colors[]" title="Please choose a color(s)" required="" minlength="1" />
            <label for="bright_green">Bright Green</label>
        </li>
        <!-- others removed for brevity -->
    </ul> <span><label for="board_colors[]" class="error"></label></span>

</fieldset>

You could simply use CSS to style the sibling <label> elements:

input[type=checkbox]:disabled + label {
    color: #ccc;
}

JS Fiddle demo.

References:

• closest().
• each().
• filter().
• toggleClass().

Answer 2

One solution is you set a class to parent element that tells us that the amount of maximum allowable item is selected. Then apply with css gray text. Example code

CSS

.max-element input:not(:checked) + label {color: lightgray;}

SJ

$('input:checkbox[name="board_colors[]"]').change(function () {
var nightLifeLimit = $('input:checkbox[name="board_colors[]"]:checked').length;
    if (nightLifeLimit > 1) {
       $('input:checkbox[name="board_colors[]"]').each(function () {
          $(this).is(':checked') ? null : $(this).prop("disabled", true);
       });
       $(this).closest('ul').addClass('max-element');
    }
    else {
        $('input:checkbox[name="board_colors[]"]').prop('disabled', false);
        $(this).closest('ul').removeClass('max-element');
    }
});

Note: Attribute minlength not allowed on element input. You can use data-minlength="1".