如何在选中另一个复选框时启用/禁用复选框？
如何在选中另一个复选框时启用/禁用复选框？
提问于 2011-05-19 23:01:16
我得到了如何选中/未选中或隐藏/显示时，一个复选框被选中，但我寻找的是当我有5个复选框快餐，餐饮，携带，交付和酒吧当用户单击快餐，休息复选框被禁用，当用户选中餐饮，休息被禁用，但当用户选中只带出快餐和餐饮被禁用。然后，当用户取消选中时，所有复选框返回到启用/显示。谢谢！-
下面是我的代码：
<script type="text/javascript">
function HideOrShowStuff(controlToHide1)
{
if (document.getElementById)
{
if(controlToHide1==1)
{
document.getElementById('2').disabled=true;
document.getElementById('3').disabled = true;
document.getElementById('4').disabled = true;
document.getElementById('5').disabled = true;
document.getElementById('1').disabled = false;
}
if(controlToHide1==2)
{
document.getElementById('1').disabled=true;
document.getElementById('2').disabled = false;
document.getElementById('4').disabled = true;
document.getElementById('5').disabled = true;
document.getElementById('3').disabled = true;
}
if(controlToHide1==3)
{
document.getElementById('1').disabled=true;
document.getElementById('2').disabled = true;
document.getElementById('4').disabled = false;
document.getElementById('5').disabled = false;
document.getElementById('3').disabled = false;
}
}
}
</script>
Type of restaurant are you?<br /> <br />
<input type="checkbox" name="restaupop1" id="1"value="fastfood" onclick="HideOrShowStuff(1)" <?PHP print $fastfood_status; ?>> Fast Food/Drive Thru <br />
<input type="checkbox" name="restaupop2" id="2"value="catering" onclick="HideOrShowStuff(2); setVisible('restaubar');" <?PHP print $catering_status; ?>> Catering<br />
<input type="checkbox" name="restaupop3" id="3" value="carryout" onclick="HideOrShowStuff(3)" <?PHP print $carryout_status; ?>> Carry-Out<br />
<input type="checkbox" name="restaupop4" id="4"value="delivery" onclick="setVisible('barpop1');" <?PHP print $delivery_status; ?>> Delivery<br />
<input type="checkbox" name="restaupop5" id="5"value="bargrill" onclick="setVisible('restaubar');" <?PHP print $bargrill_status; ?>>Bar/Grill回答 6
Stack Overflow用户
回答已采纳
发布于 2011-05-20 01:01:10
总而言之，并不是太难。
http://jsfiddle.net/A5TGf/19/
HTML：
<form action="./" id="checkForm" method="post">
<fieldset>
<label for="foo">foo</label>
<input type="checkbox" id="foo" value="foo" />
<label for="bar">bar</label>
<input type="checkbox" id="bar" value="bar" />
<label for="baz">baz</label>
<input type="checkbox" id="baz" value="baz" />
</fieldset>
</form>JS：
var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;
addChangeHandlers(form);
function addChangeHandlers(form)
{
for(var i=0;i<form.elements.length;i++)
{
var element = form.elements[i];
if(element.tagName === "INPUT" && element.type === "checkbox")
{
if(!element.onchange)
{
element.onchange = checkBoxChanged;
}
}
}
}
function delegateFormClick(evt)
{
var target;
if(!evt)
{
//Microsoft DOM
target = window.event.srcElement;
}else if(evt)
{
//w3c DOM
target = evt.target;
}
if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
{
if(target.checked)
{
disableCheckBoxes(target.id, document.getElementById("checkForm"));
}else if(!target.checked)
{
enableCheckBoxes(document.getElementById("checkForm"));
}
}
}
function checkBoxChanged()
{
if(this.checked)
{
disableCheckBoxes(this.id, document.getElementById("checkForm"));
}else if(!this.checked)
{
enableCheckBoxes(document.getElementById("checkForm"));
}
}
function disableCheckBoxes(id, form)
{
var blacklist = [];
if(id)
{
switch(id)
{
case "foo":
blacklist = ["bar", "baz"];
break;
case "bar":
blacklist = ["foo"];
break;
case "baz":
blacklist = ["foo", "bar"];
break;
}
}else
{
throw new Error("id is needed to hard-wire input blacklist");
}
for(var i=0;i<blacklist.length;i++)
{
var element = document.getElementById(blacklist[i]);
if(element && element.nodeType === 1)
{
//check for element
if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
{
element.disabled = "disabled";
}
}else if(!element || element.nodeType !== 1)
{
throw new Error("input blacklist item does not exist or is not an element");
}
}
}
function enableCheckBoxes(form)
{
for(var i=0;i<form.elements.length;i++)
{
var element = form.elements[i];
if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
{
element.disabled = "";
}
}
}关于我正在做的事情，有一些简短的说明：
- 我正在使用事件委派来最小化事件处理程序的数量。该表单监听正在冒泡的点击事件，然后根据单击的元素及其
checkedDOM属性调用函数。如果不是目标checkbox. - I'm，则在复选框中将
disabledDOM属性设置为"“(空字符串)时，在复选框中将HTMLFormElement DOM属性设置为”“(空字符串)，则 - 我正在遍历HTMLFormElement.elements集合以方便地访问checkbox。如果用户通过Tab键/输入选中复选框，则此方法也适用或者通过handler.
- This
onchange代码的另一种方法应该在IE中工作，虽然我在工作中使用IE via Wine遇到了一些严重的问题，所以我以后再测试。 - 它使用了一个“黑名单”，这是一个数组，其中包含了当点击相应的复选框时，你不想启用的复选框的ids。
如果你需要更多的帮助，请告诉我。
Stack Overflow用户
发布于 2011-05-19 23:16:12
所以我还没有完全理解你想要得到的逻辑。但是，如果您想知道复选框是未选中还是已选中，您可以像这样测试它
function hideOrShowStuff(box, controlToHide1) {
if(box.checked) {
// the hide logic
} else {
// the show logic
}
}您还需要像这样传递框引用
onclick="HideOrShowStuff(this, 1)" 希望这能有所帮助
Stack Overflow用户
发布于 2011-05-19 23:05:16
你可以使用jQuery来做这件事，它(可能)会让你的生活变得更容易。请查看这些文章，了解如何实现您想要的(使用jQuery)：
USING JQUERY TO SHOW/HIDE FORM ELEMENTS BASED ON A CHECKBOX SELECTION
NB:其他框架也是可用的。你可以根据个人喜好来挑选。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6060681
复制相关文章
相似问题
腾讯云开发者
