禁用和启用复选框Javascript
Disable and Enable Checkboxes Javascript
我有一系列复选框:
<tr id="tr5" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<td class="td5"><input name="benefit" value="Bonuses" id="benefit5" type="checkbox" onchange='addition();'</td>
<td class="td5"><label for="benefit5"> <b>Bonuses</b></label></td>
<tr id="tr6" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<td class="td6"><input name="benefit" value="Final salary pension" id="benefit6" type="checkbox" onchange='addition();'</td>
<td class="td6"><label for="benefit6"> <b>Final salary pension</b></label></td>
一旦用户选择了3个复选框,是否可以一次禁用其余复选框(有30个复选框-我可以单独使用,但这似乎很痛苦)?是的,我们该怎么做呢?此外,如果用户取消选择其中一个复选框,是否可以再次启用它们?
编辑:如果可能的话,有人能为我指明正确的方向吗?
提前感谢
H。
演示
var chk=0;
function checkCheckboxes() {
var checkboxes = document.getElementsByName("benefit");
for (var i=0;i<checkboxes.length;i++) {
chk += checkboxes[i].checked?1:0; // count in case we reload
checkboxes[i].onclick=function() { // set up event handler for each
chk+=this.checked?1:-1; // add or subtract one
if (chk > 3) {
console.log(chk,"too many")
this.checked=false;
chk--; // we counted too many
}
}
}
}
function changeBackgroundColor(row,on) {
var id = row.id; // if you need that
row.style.backgroundColor=(on)?"red":"white";
}
window.onload=function() {
var trs = document.getElementById("table1").rows;
for (var i=0;i<trs.length;i++) {
trs[i].onmouseover=function() {
changeBackgroundColor(this,1);
}
trs[i].onmouseout=function() {
changeBackgroundColor(this,0);
}
}
checkCheckboxes();
}
使用
<table id="table1">
<tr id="tr1">
<td class="td1"><input name="benefit" value="Bonuses" id="benefit1" type="checkbox"</td>
<td class="td1"><label for="benefit1"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr2">
<td class="td2"><input name="benefit" value="Bonuses" id="benefit2" type="checkbox"</td>
<td class="td2"><label for="benefit2"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr3">
<td class="td3"><input name="benefit" value="Bonuses" id="benefit3" type="checkbox"</td>
<td class="td3"><label for="benefit3"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr4">
<td class="td4"><input name="benefit" value="Bonuses" id="benefit4" type="checkbox"</td>
<td class="td4"><label for="benefit4"> <b>Bonuses</b></label></td>
</tr>
</table>
相关文章:
- 为复选框javascript指定两个值
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- 使用javascript在页面加载时取消选中所有复选框
- 更改类以选中复选框JavaScript
- 选中所有复选框javascript
- 方法通过复选框javascript获取触发器
- 选中所有复选框 JavaScript
- 复选框 Javascript 函数在 Bootstrap modal 中不起作用
- 使用复选框 JavaScript 禁用按钮
- 隐藏输入未正确选择的自定义复选框.Javascript需要调整
- 不带POSTING值的求和复选框-Javascript
- 自定义警报与复选框- Javascript
- 按钮,根据字符串开始选择复选框- Javascript
- 简单的复选框javascript不起作用
- 禁用和启用复选框Javascript
- 如何计算表单中的所有复选框(Javascript)
- 数据类型检查提示复选框javascript