Question

我有一个包含多个复选框和一个禁用按钮的HTML页面。

现在，只要选中一个或多个复选框，该按钮就必须启用。

此外，取消选中所有复选框后，该按钮必须再次进入禁用状态。

测试用例似乎是：

如果选中了复选框，则应启用该按钮（我可以开始工作）。

如果选中另一个复选框，则该按钮保持启用状态（这也有效）。

如果未选中第一个复选框，则该按钮也必须保持启用状态，因为仍然会选中第二个复选框。

最后一部分是我无法开始工作。

复选框是动态的，所以我不能事先定义它们。可能有两个，或十个。

这就是我尝试for循环的原因。

到目前为止，我无法实现这一目标：

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用HTML和onchange事件以及Javascript，我都无法使用它。

这两个不是同时使用的。

编辑：得到它的工作：Takit Isy的答案工作正常！

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

FuelFlow

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);
})

如果选中复选框，则触发事件javascript

2 个答案: