инициировать событие, если флажок установлен Javascript

Question

У меня есть HTML-страница с несколькими флажками и одной отключенной кнопкой.

Теперь, как только один или несколько флажков отмечены, кнопка должна быть включена.

Кроме того, когда все флажки сняты, кнопка должна снова перейти в отключенное состояние.

Тестовый пример выглядит так:

Если флажок установлен, то кнопка должна быть включена (это я могу приступить к работе).

Если установлен другой флажок, кнопка остается включенной (это также работает).

Если первый флажок снят, кнопка также должна оставаться включенной, поскольку второй флажок все еще установлен.

Последняя часть - я не могу приступить к работе.

Флажки являются динамическими, поэтому я не могу определить их заранее. Там может быть два или десять.

Вот почему я попробовал цикл for.

Я не могу заставить это работать, что у меня так далеко:

var x = document.getElementsByName("cb");

for (var i = 0; i < x.length; i++) {
    if(x[i].checked == true){
	    document.getElementById('Button1').disabled = false;
    }
} 

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
</div>

И с событием HTML и onchange, и с Javascript, я не могу заставить его работать.

Оба не используются одновременно.

РЕДАКТИРОВАТЬ: Получил работу: ответ Такит Иси работает отлично!

Answer 1

Я предлагаю вам сделать такие вещи:
(Смотрите комментарии в моем коде)

var cbs = document.querySelectorAll('input[type="checkbox"]');
var but = document.getElementById('Button1');

function update() {
  but.disabled = true; // Disabled by default
  cbs.forEach(function(entry) {
    if (entry.checked) {
      but.disabled = false; // Enable button
      return false; // Exit the loop
    }
  });
}

cbs.forEach(function(entry) {
  entry.onchange = update; // Bind update() function on change of each checkboxes
});

<div class="container">
  <input type="submit" name="Button1" class="inputButton" id="Button1" value=" Send " disabled />
</div>
<div>
  <input type="checkbox" />
  <input type="checkbox" />
</div>

Надеюсь, это поможет.

Answer 2

function onChange(e) {
    var checkedInputs = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checkedInputs.length > 0) {
        document.getElementById('Button1').disabled = false;
    } else {
        document.getElementById('Button1').disabled = true;
    }
}

document.querySelectorAll('input[type="checkbox"]').forEach(function(val, key) {
    val.addEventListener("change", onChange);
})

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox" />
   <input type="checkbox" />
</div>