遍历复选框并有条件地禁用未选中

时间:2018-07-26 15:48:46

标签: javascript forms checkbox

我正在尝试用纯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;
            }
        }
  }

})();

2 个答案:

答案 0 :(得分:3)

您的代码中有两个问题:

  1. 您要从if条件返回,这将导致循环终止。
  2. 您没有为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元素上使用getAttributesetAttribute。为了方便起见,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) {
    ...
}

请记住,您使用continuebreak而不是return来控制循环。