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

Question

我正在尝试用纯 JS 编写一个基本函数，它只检查选中复选框的数量，如果该数量超过一定数量，则禁用其余数量。我可以在 jQuery 中轻松实现这一点，但试图让它在纯 JS 中工作。我有一个 CodePen 设置 here我在下面包括了我的工作 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;
            }
        }
  }

})();

Answer 1

你的代码有两个问题:

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>