enable radio groups function

[metroOne]

I have a form with 2 sets of radio buttons and a set of checkboxes. It looks like this:

Working part: When a user selects first 'radOpt' button the othter radio buttons 'radioValue' are disabled.
When a user selects the second 'radOpt' button the radio buttons 'radioValue' are enabled and checkboxes are disabled.

Non-working part: if a user selects any checkbox or radio buttons named 'radioValue' other set of options is not disabled as well as the the radio buttons on top.

<script language='javascript'>
function selectOption(optValue)
{
for (n=0; n<optValue.elements.length; n++)
{
if (optValue.elements[n].checked == true)
{
elName = optValue.elements[n].name
alert (elName)
if (elName = 'radOpt')
{
elValue = optValue.elements[n].value
alert(elValue)
}
if (elName == 'chkValue' || elValue == '0')
{
optValue.radOpt.checked = true;
if (typeof optValue.radioValue.length != 'undefined')
{
if (elValue == '0')
{
for (j=0; j<optValue.chkValue.length; j++)
{
optValue.chkValue[j].disabled = false;
}
for (i=0; i<optValue.radioValue.length; i++)
{
optValue.radioValue.checked = false;
optValue.radioValue.disabled = true;
}
}
else
{
for (i=0; i<optValue.radioValue.length; i++)
{
optValue.radioValue.disabled = true;
}
}
}
else
{
optValue.radioValue.disabled = true;
}
}
else if ( elName == 'radioValue' || elValue == '1')
{
optValue.radOpt.checked = true;
if (typeof optValue.chkValue.length != 'undefined')
{
if (elValue == '1')
{
for (i=0; i<optValue.radioValue.length; i++)
{
optValue.radioValue.disabled = false;
}
for (j=0; j<optValue.chkValue.length; j++)
{
optValue.chkValue[j].checked = false;
optValue.chkValue[j].disabled = true
}
}
else
{
for (j=0; j<optValue.chkValue.length; j++)
{
optValue.chkValue[j].disabled = true
}
}
}
else
{
optValue.chkValue.disabled = true;
}
}
}
}
}
</script>

<form name="viewOptions" onclick="JavaScript: selectOptions(optValue);">

<div>
<input type="radio" name="radOpt" value="0">
<input type="radio" name="radOpt" value="1">
</div>

<div>
<input type="checkbox" name="chkValue">
<input type="checkbox" name="chkValue">

<input type="radio" name="radioValue">
</div>

<div>
<input type="checkbox" name="chkValue=">
<input type="checkbox" name="chkValue="">
<input type="checkbox" name="chkValue=">

<input type="radio" name="radioValue">
</div>
</form>

I need to do this: When a user selects a checkbox - all radio buttons named 'radioValue' should be disabled and a radio button named 'radOpt' with value = 0 should be selected.

When a user selects a radio buttons named 'radioValue' - all checkboxes should be disabled and a radio buttons called 'radioValue' enabled and a radio button named 'radOpt' with value = 1 selected.

When a user selects the first radio button 'radOpt' radio buttons 'radioValue' should be disabled.

When a user selects the second radio button 'radOpt' radio buttons 'radioValue' should be enabled and checkboxes disabled. The second radio button 'radOpt' with value = 1 should be selected.

Any suggestions, please...

 

[metroOne]

I got it to work. I have changed few lines and set the variable elValue in the first line.

....
var elValue =-1
if (elName == 'chkValue' || elValue == '0')
{

if (typeof optValue.radioValue.length != 'undefined')
{
if (elValue == '0')
{
for (j=0; j<optValue.chkValue.length; j++)
{
optValue.chkValue[j].disabled = false;
}
for (i=0; i<optValue.radioValue.length; i++)
{
optValue.radioValue.checked = false;
optValue.radioValue.disabled = true;
}
}
else
{
optValue.radOpt[0].checked = true;
for (i=0; i<optValue.radioValue.length; i++)
{
optValue.radioValue.disabled = true;
}
}
}
else
{
optValue.radioValue.disabled = true;
}
}


Does anyone has a more simple solution?