[英]JavaScript ~ I need to disable 2 checkboxes when the 3rd checkbox is selected
I need checkBox 3 to disable checkBox 1 & 2 when it is selected. 选择复选框1和2时,我需要复选框3来禁用它。 The code works when I have the
onClick
in the 3rd checkbox tag, but my lead programmer wants the onClick
in the JavaScript code above. 当我在第三个复选框标签中包含
onClick
,该代码有效,但是我的首席程序员希望在上面的JavaScript代码中具有onClick
。 I'm not that good with JS so I don't know exactly why it's not working. 我对JS不太满意,所以我不知道为什么它不起作用。 This is what I have so far:
这是我到目前为止的内容:
<!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="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery makes event handlers a piece of cake: 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});
}
});
As Eric's solution is using jQuery, here is a pure JavaScript alternative: 由于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="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
This might not be IE safe as I am currently running Linux. 由于我当前正在运行Linux,因此这可能不是IE安全的。 If it doesn't work in IE, the problem will be inside the toggle function.
如果它在IE中不起作用,则问题出在切换功能内部。
My approach apposed to Fabian's, I would do some thing like this, as you have a div
around around those block of three checkboxs called many-from-many this will look for the (parent <lable>
) nodes (parent <DIV>
) of the third check box and then find the childNodes (checkboxs) 我的方法适用于Fabian,我会做类似的事情,因为在这三个复选框的框周围有一个
div
,称为“多对多”,它将寻找(parent <lable>
)节点(parent <DIV>
)节点。第三个复选框,然后找到childNodes(复选框)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.