Disabled input

disabeld checkbox when this max 2 item

by MiguelR

HTML

<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[]">
					<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>

CSS

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

JavaScript

$('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');
    }
});