Znalazłem rozwiązanie, które mi odpowiada, ale niestety jest oparte na selektorach ID a ja muszę się oprzeć na class-ach.
Pozmieniałem (w skrypcie) getElementById na getElementByClassName, pozmieniałem id na class, ale niestety nie działa jak w pierwotnej wersji (w sumie w ogolę nie działa. Poniżej skrypt bez moich zmian).
Coś źle robię (w sumie to nie znam się na JS).
Czy ktoś może mi podpowiedzieć, jak to pozmieniać?
<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>
<script type="text/javascript">//<![CDATA[
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 = "";
}
}
}
//]]></script>