我有一个带有多个复选框和一个按钮的表单，默认情况下该按钮将处于禁用状态，但是选中至少2个或2个以上的复选框后，该按钮应处于活动状态。我该如何在javascript中做到这一点。代码是
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
<label for="A8">A8</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
<label for="A7">A7</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
<label for="A6">A6</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
<label for="A5">A5</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
<label for="A4">A4</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
<button type="submit" name="next" />
</form> 首先，您要更改按钮，使其开始禁用并添加一个ID：
<button type="submit" name="next" disabled id="enable-on-two" >Stuff</button>
接下来，编写一个函数来计算所选复选框的数量：
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
然后，编写事件处理程序以实际更改按钮的状态：
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
}
最后，将事件处理程序绑定到您的整个表单，因为change复选框中的各个事件将冒泡：
document.getElementById('world').addEventListener('change', onChange, false);
这是一个小提琴演示：https : //jsfiddle.net/wphgs09r/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句