[英]Possible to add CSS to some JS to style disabled checkbox text
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. 我使用一些JS来限制用户可以在我正在处理的表单中选择的复选框数量。 With this JS, once the limit of 2 is reached, the remaining checkboxes are greyed out.
使用此JS,一旦达到2的限制,其余复选框将显示为灰色。
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. 但是,我使用的是其他JS,它们删除了实际的复选框,因此我可以按照自己喜欢的方式设置表单的样式,因此,当达到限制时,就没有视觉提示,无法选择其余选项。
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. 这是我正在使用的JS复选框的灰色。 Can I add a css style to this to do what I need?
我可以为此添加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 for the checkbox section of the form 表单的复选框部分的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>
I'd personally suggest adding a class to the parent <li>
element and then styling the text of the <label>
using CSS: 我个人建议将一个类添加到父
<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);
});
});
That said, if you move the <input />
elements before the <label>
elements, giving: 就是说,如果将
<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>
You could simply use CSS to style the sibling <label>
elements: 您可以简单地使用CSS为同级
<label>
元素设置样式:
input[type=checkbox]:disabled + label {
color: #ccc;
}
References: 参考文献:
closest()
. closest()
。 each()
. each()
。 filter()
. filter()
。 toggleClass()
. toggleClass()
。 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.
然后应用CSS灰色文本。 Example code
范例程式码
CSS CSS
.max-element input:not(:checked) + label {color: lightgray;}
SJ 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. 注意:元素输入中不允许使用属性minlength。 You can use data-minlength="1".
您可以使用data-minlength =“ 1”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.