更新时间:2023-01-07 08:45:56
总而言之,不是太难.
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:
checked
DOM 属性调用一个函数.disabled
DOM 属性设置为禁用".disabled
DOM 属性设置为 ""(空字符串).onchange
处理程序通过 Tab 键/输入或其他方法选择复选框,这也适用.checked
DOM property.disabled
DOM property to "disabled" on the checkbox if it's not the target checkbox.disabled
DOM property to "" (an empty string) on the checkbox if no checkboxes are checked.onchange
handler.如果您有进一步的需求,请告诉我.
Let me know if you're looking for anything further.