using checkboxes and radio buttons in forms

[pinkcat_02]

hi all

i just wanna ask if anyone can help me with the problem of enabling checkboxes when a related radio button is selected.

i have 5 radio buttons and have 8 chekcboxes related to one of those radio buttons.
if that radio button is selected i want all the diabled checkboxes to be enabled.

does anyone has an idea how to do it?

[ez4ne12c]

yes, this script uses a lock image which is toggled by a checbox
which locks a bunch of radio buttons
<script>
function Show_icing_lock()
{ if (document.icing_position.icinglock.checked)
{ icing_lock.innerHTML="<img src='hi_locked.gif'></img>";
}
else
{ icing_lock.innerHTML="<img src='hi_open.gif'></img>";
}
}
</script>

<form name="icing_position">
<table border=4>
<tr><td><font color="#000000"><B>ICING</B></td>
<td><input type="checkbox" name="icinglock" checked='yes' onclick='javascript:Show_icing_lock();'><div id='icing_lock' style="position: relative; right: -20px; top: -20px;"><img src='hi_locked.gif' height=18 width=15></img></div></td>
<td><input type="button" value=""></td>
<td><input type="button" value=""></td>
<td><input type="button" value=""></td>
<td><input type="button" value=" Next " onClick="javascript:if (!document.icing_position.icinglock.checked) Next_icing();"></td>
<td><input type="button" value="Previous" onClick="javascript:if (!document.icing_position.icinglock.checked) Previous_icing();"></td>
<td><input type="button" value=" Reset " onClick="javascript:if (!document.icing_position.icinglock.checked) Icing_reset();">
<input type="button" value=" Help " onClick="javascript:if (!document.icing_position.icinglock.checked) Icing_help();"></td>

<tr>
<td><font color="#000000">Position</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[8].checked=true;'><input type=radio value="excellent" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[8].checked=true} else {document.icing_position[8].checked=false};' onMouseover="showtip(this,event,icing_position_excellent)" onMouseout="hidetip()"><font color="#000000">excellent</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[9].checked=true;'><input type=radio value="very good" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[9].checked=true} else {document.icing_position[9].checked=false};' onMouseover="showtip(this,event,icing_position_verygood)" onMouseout="hidetip()"><font color="#000000">very good</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[10].checked=true;'><input type=radio value="ok" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[10].checked=true} else {document.icing_position[10].checked=false};' onMouseover="showtip(this,event,icing_position_ok)" onMouseout="hidetip()"><font color="#000000">ok</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[11].checked=true;'><input type=radio value="fair" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[11].checked=true} else {document.icing_position[11].checked=false};' onMouseover="showtip(this,event,icing_position_fair)" onMouseout="hidetip()"><font color="#000000">fair</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[12].checked=true;'><input type=radio value="poor" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[12].checked=true} else {document.icing_position[12].checked=false};' onMouseover="showtip(this,event,icing_position_poor)" onMouseout="hidetip()"><font color="#000000">poor</td>
<td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[13].checked=true;'><input type=radio value="missed" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[13].checked=true} else {document.icing_position[13].checked=false};' onMouseover="showtip(this,event,icing_position_missed)" onMouseout="hidetip()"><font color="#000000">missed</td>
<td>
</form>

well that might be a bit hard to follow but it does what you want
effectively ...
you use an if statement in the onclick of the button you want to be lockable or in this case on the <td> containing the button, this allows the user to click roughly the button and it will work if it is unlocked

alternatively you could use outerHTML to toggle the visibility of the buttons you want to disable.. but ..i found this tricky to get working if the buttons are in a table..

ez