可能添加CSS到一些JS样式禁用复选框文本

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

本文关键字：样式 复选框 文本 JS 添加 CSS      更新时间：2023-09-26

我正在使用一点JS来限制用户可以在我正在制作的表单中选择的复选框的数量。使用这种JS，一旦达到2个的限制，其余的复选框就会变灰。

然而，我正在使用其他JS删除实际的复选框，以便我可以按照我喜欢的方式样式表单，所以现在当达到限制时，没有视觉提示，剩余的选项不能被选中。

我希望有一种方法可以在达到选择限制时将剩余选项中的文本样式变为灰色。

这是我使用的JS，灰色的复选框。我可以添加一个css样式来做我需要什么?

$('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
<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>

我个人建议为父元素<li>添加一个类，然后使用CSS对<label>的文本进行样式化:

$('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.

也就是说，如果你把<input />元素移到<label>元素之前，得到:

<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>

你可以简单地使用CSS样式的兄弟<label>元素:

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

JS Fiddle demo.

引用:

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

一种解决方案是将类设置为父元素，告诉我们选择了最大允许条目的数量。然后应用css灰色文本。示例代码

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

注意:元素输入不允许最小长度属性。你可以使用data-minlength="1"

相关文章：