~我需要禁用2复选框时,第三个复选框被选中
JavaScript ~ I need to disable 2 checkboxes when the 3rd checkbox is selected
我需要checkBox 3来禁用checkBox 1 &2当它被选中。当我在第三个复选框标签中有onClick
时,代码工作,但我的首席程序员希望在上面的JavaScript代码中有onClick
。我对JS不太好,所以我不知道为什么它不起作用。这是我目前所看到的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var field = document.getElementById("check_1157");
if (field)
{
function update1157Box(contactMethod)
{
var contactMethod = document.getElementById("check_1157");
if(contactMethod.check_1157.checked)
{
//enable the not to receive information
contactMethod.check_1156.disabled =true;
contactMethod.check_1156.checked = false;
contactMethod.check_1158.disabled =true;
contactMethod.check_1158.checked = false;
return;
}
}
field.onClick = update1157Box(this.form)
//the not to receive information
contactMethod.check_1156.checked = false;
contactMethod.check_1156.disabled = false;
contactMethod.check_1158.checked = false;
contactMethod.check_1158.disabled = false;
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answerswers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answerswers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answerswers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery让事件处理变得很简单:
$('#check_1157').click(function() {
if ($(this).prop('checked')) {
$('#check_1156, #check_1158').prop({
checked: false,
disabled: true
});
} else {
$('#check_1156, #check_1158').prop({disabled: false});
}
});
我的方法反对费边的,我会做这样的事情,因为你有一个div
周围的三个复选框块称为多从多这将寻找(父<lable>
)节点(父<DIV>
)的第三个复选框,然后找到childNodes(复选框)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answerswers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answerswers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answerswers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div>
</form>
.
function togTopTwo(c){
var mm = c.parentNode.parentNode;
var xx = mm.firstChild.firstChild;
var secondOfMany = xx.parentNode.nextSibling.firstChild;
if(c.checked){
xx.disabled=true;
secondOfMany.disabled = true;
}else{
xx.disabled=false;
secondOfMany.disabled =false;
}
}
Eric的解决方案是使用jQuery,这里有一个纯JavaScript替代方案:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var toggle_list = ['check_1156', 'check_1158'];
function toggle(checkbox) {
if (checkbox.disabled) {
checkbox.removeAttribute('disabled');
} else {
checkbox.setAttribute('disabled', true);
}
}
function toggleActivation() {
for (var i=0; i<toggle_list.length; i++) {
var id = toggle_list[i];
var checkbox = document.getElementById(id);
toggle(checkbox);
}
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answerswers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answerswers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answerswers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
这可能不是IE安全,因为我目前正在运行Linux。如果在IE中不起作用,则问题出在toggle函数内部。
相关文章:
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 选中多个具有相同名称的复选框
- 使用$.ajax发布多个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- 使用jQuery只返回选中复选框后的第一个表单元格值
- 添加具有多个值的复选框
- angularjs复选框验证至少两个
- jquery从2个json字符串构建一个复选框表单
- JavaScript-取决于多个下拉选择或复选框的动态链接
- 无法限制所选复选框的数量(尝试了多个代码段)
- 我有多个复选框,并希望为其中 2 个制定规则,以便如果我选择 1 个,则无法选择另一个
- 将复选框限制为仅三个复选框 - 如何
- 将可选择的复选框数量限制为三个(不包括一个)
- 选中最多三个复选框并禁用其他复选框
- ~我需要禁用2复选框时,第三个复选框被选中
- HTML选择三个不同的复选框并显示它们
- 必须勾选最后三个复选框才能提交
- 如何设置复选框,当其到达第三个复选框时自动取消选中