我正在尝试用纯JS编写一个基本功能,该功能仅检查选中的复选框的数量,如果该数量超过一定数量,则禁用其余功能。我可以在jQuery中轻松实现此目的,但尝试使其在纯JS中工作。我已经设置了here的CodePen,并将下面的工作JS包括在内。感谢您的任何见解。
(function() {
var checkboxes = document.querySelectorAll('input[id^="mktoCheckbox"]');
var active = document.querySelectorAll('input[id^="mktoCheckbox"]:checked');
var numActive = active.length;
console.log(numActive);
if (numActive > 1) {
for(var i = 0; i < checkboxes.length; i++){
if (checkboxes[i].checked == true) {
return;
} else {
checkboxes[i].disabled == true;
}
}
}
})();
答案 0 :(得分:3)
您的代码中有两个问题:
if
条件返回,这将导致循环终止。true
属性分配disabled
,而是与==
进行了比较。将相关代码段更改为以下代码以使其起作用:
if (numActive > 1) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked != true) {
checkboxes[i].disabled = true;
}
}
}
您可以找到笔here的工作叉。以下是有效的SO代码段:
(function() {
var checkboxes = document.querySelectorAll('input[id^="mktoCheckbox"]');
var active = document.querySelectorAll('input[id^="mktoCheckbox"]:checked');
var numActive = active.length;
console.log(numActive);
if (numActive > 1) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked != true) {
checkboxes[i].disabled = true;
}
}
}
})();
<fieldset>
<legend>Choose some monster features</legend>
<div>
<input type="checkbox" id="mktoCheckbox_1" name="feature" value="scales" checked />
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="mktoCheckbox_2" name="feature" value="horns" />
<label for="horns">Horns</label>
</div>
<div>
<input type="checkbox" id="mktoCheckbox_3" name="feature" value="claws" />
<label for="claws">Claws</label>
</div>
<div>
<input type="checkbox" id="mktoCheckbox_4" name="feature" value="tails" checked />
<label for="tails">Tails</label>
</div>
</fieldset>
答案 1 :(得分:1)
这里是working pen。
首先,imo,您应该在DOM元素上使用getAttribute
和setAttribute
。为了方便起见,HTMLInputElement.checked
afaik仅反映了checked
属性(并将其转换为boolean
)。
考虑到这一点,您现在需要使用严格的比较运算符===
对字符串进行测试。例如
if(checkbox.getAttribute('checked') === 'true') {...}
因为使用==
的结果为假
true == 'true' // false
此外,您可以在DOM集合上使用 for 循环,而不是 for 循环。即这有效:
const checkboxes = document.querySelectorAll('...');
for(const checkbox of checkboxes) {
...
}
请记住,您使用continue
和break
而不是return
来控制循环。