选择另一个复选框时如何启用/禁用复选框? [英] How do I enable/disable checkboxes when another checkbox is selected?
本文介绍了选择另一个复选框时如何启用/禁用复选框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我了解了如何在选中一个复选框时选中/取消选中或隐藏/显示，但我要找的是当我有 5 个复选框时，当用户单击快餐"时，快餐"、餐饮"、外卖"、外卖"和酒吧"，其余复选框被禁用，当用户选中 Catering 时，rest 被禁用，但当用户选中 Carryout 时，只有 Fastfood 和 Catering 被禁用.然后当用户取消选中时，所有复选框都返回启用/显示.谢谢！——
I got on how to check/unchecked or hide/show when one checkbox is checked but what im looking for is when I have 5 checkboxes Fastfood, Catering, Carryout, Delivery and Bar when user clicked Fastfood ,rest checkboxes are disable, when user checked Catering, rest are disable but when user checked Carryout only Fastfood and Catering are disable. Then when user unchecked, all checkboxes back to enable/show. thanks! –
这是我的代码:
<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
推荐答案
总而言之，不是太难.
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 = "";
}
}
}
关于我正在做的事情的一些快速笔记:
Some quick notes on what I'm doing:
- 我正在使用事件委托来最小化事件处理程序的数量.表单侦听冒泡的点击事件，然后根据点击的元素及其
checkedDOM 属性调用一个函数. - 我正在遍历 HTMLFormElement.elements 集合以轻松访问复选框.
- 如果复选框不是目标复选框，我会将
disabledDOM 属性设置为禁用". - 如果未选中任何复选框，我将在复选框上将
disabledDOM 属性设置为 ""(空字符串). - 如果用户通过
onchange处理程序通过 Tab 键/输入或其他方法选择复选框，这也适用. - 这段代码应该可以在 IE 中运行，尽管我在工作中通过 Wine 使用 IE 时遇到了一些严重的问题，所以我必须稍后进行测试.
- 它使用黑名单"，这是一个数组，其中包含单击相应复选框时不想启用的复选框的 ID.
- I'm using event delegation to minimize the amount of event handlers. The form listens for a click event bubbling up, then calls a function depending on which element was clicked and its
checkedDOM property. - I'm traversing the HTMLFormElement.elements collection to easily access the checkboxes.
- I'm setting the
disabledDOM property to "disabled" on the checkbox if it's not the target checkbox. - I'm setting the
disabledDOM property to "" (an empty string) on the checkbox if no checkboxes are checked. - This also works if the user selects the checkbox by tabbing/entering or another method via the
onchangehandler. - This code should work in IE, though I'm having some serious problems with IE via Wine at work, so I'll have to test later.
- It uses a "blacklist", which is an array that contains ids to checkboxes you don't want enabled when the corresponding checkbox is clicked.
如果您有进一步的需求，请告诉我.
Let me know if you're looking for anything further.
这篇关于选择另一个复选框时如何启用/禁用复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
