javascript - 如果所有复选框均未选中，则禁用按钮

Question

我有一个复选框列表，如果没有选中任何一个，我需要禁用提交按钮，并在至少选中一个后立即启用它。我看到很多关于仅使用一个复选框来完成此操作的建议，但我很想让它与多个复选框一起使用。我想在这个项目中使用 javascript，尽管我知道 jquery 有很多答案。这就是我所得到的 - 它适用于第一个复选框，但不适用于第二个复选框。

HTML:

 <input type="checkbox" id="checkme"/> Option1<br>
 <input type="checkbox" id="checkme"/> Option2<br>
 <input type="checkbox" id="checkme"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Javascript:

 var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}

Answer 1

我会将您的输入分组到一个容器中，并使用 addEventListener 监视该容器中的事件。然后循环遍历复选框，检查它们的状态。最后将按钮设置为禁用，除非满足我们的条件。

var checks = document.getElementsByName('checkme');
var checkBoxList = document.getElementById('checkBoxList');
var sendbtn = document.getElementById('sendNewSms');

function allTrue(nodeList) {
  for (var i = 0; i < nodeList.length; i++) {
    if (nodeList[i].checked === false) return false;
  }
  return true;
}

checkBoxList.addEventListener('click', function(event) {
  sendbtn.disabled = true;
  if (allTrue(checks)) sendbtn.disabled = false;
});

<div id="checkBoxList">
  <input type="checkbox" name="checkme"/> Option1<br>
  <input type="checkbox" name="checkme"/> Option2<br>
  <input type="checkbox" name="checkme"/> Option3<br>
</div>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />