Marc wrote:
Is there a way to produce 3 radio buttons, which when one is selected,
enables 11 check boxes which are otherwise disabled (greyed out)?
EXAMPLE:
Option 1 --Radio buttons
Option 2
Option 3
1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected
I hope I'm making myself clear...
The following should do something like what you want. setTimeout is
used to run the function when the form is clicked so that if reset it
clicked, it has time to reset the form before runCheck is run.
If JavaScript is disabled, the checkboxes aren't disabled else users can
never select them. You may want to clear the checkboxes when disabling
them too - it's up to you.
<script type="text/javascript">
function doCheck(el, cbGroup)
{
var elChecked = el.checked;
if (cbGroup && cbGroup.length){
var i = cbGroup.length;
while (i--){
cbGroup[i].disabled = !elChecked;
// Uncomment the following if boxes are to
// be unchecked when disabled
// if (!el.checked) cbGroup[i].checked = false;
}
}
}
function runChecks()
{
if ( !document.getElementById
|| !document.getElementsByTagName ){
return;
}
var el = document.forms[0].elements['rg-1'][2];
var div = document.getElementById('checkGroup');
var cbGroup = div.getElementsByTagName('input');
doCheck(el, cbGroup);
}
window.onload = runChecks;
</script>
<!--
setTimeout used for onclick to allow reset to run before
runChecks runs
-->
<form action="" onclick="setTimeout('runChecks()',50);">
<div>
<input type="radio" name="rg-1" checked>Opt one<br>
<input type="radio" name="rg-1">Opt two<br>
<input type="radio" name="rg-1">Opt three<br>
</div>
<div id="checkGroup">
<input type="checkbox" name="cb-1">Check 1
<input type="checkbox" name="cb-2">Check 2
<input type="checkbox" name="cb-3">Check 3<br>
</div>
<div>
<input type="reset">
</div>
</form>
--
Rob
