Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Need help to enable/disable radio buttons with javascript

I have a free format question with a 3 column table where the user picks Most important/2nd most important/3rd most important. When the user chooses an item in column 1, I'm using javascript to disable the radio buttons in column 2 and 3. The same functionality for choices in column 2 and 3. This is to assure that they don't pick the same feature in all 3 columns. That part is working fine.  What isn't working is if they change their mind and choose a different item the 'disabled' radio buttons in the originally chosen column don't re-enable.

Here's the code
<table>
<tr><td>&nbsp;</td>
<td align="center">Most Important</td>
<td align="center">2nd Most Important</td>
<td align="center">3rd Most Important</td>
</tr>

<tr><td>Feature 1</td>
<td align="center"><input type="radio" name="Q3d_c1" value="1" id="Q3d_c1_1" onchange="if (this.checked){document.getElementById('Q3d_c2_1').disabled=true;document.getElementById('Q3d_c3_1').disabled=true;}else{document.getElementById('Q3d_c2_1').disabled=false;document.getElementById('Q3d_c3_1').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c2" value="1" id="Q3d_c2_1" onchange="if (this.checked){document.getElementById('Q3d_c1_1').disabled=true;document.getElementById('Q3d_c3_1').disabled=true;}else{document.getElementById('Q3d_c1_1').disabled=false;document.getElementById('Q3d_c3_1').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c3" value="1" id="Q3d_c3_1" onchange="if (this.checked){document.getElementById('Q3d_c1_1').disabled=true;document.getElementById('Q3d_c2_1').disabled=true;}else{document.getElementById('Q3d_c1_1').disabled=false;document.getElementById('Q3d_c2_1').disabled=false;}"></td>
</tr>

<tr><td>Feature 2</td>
<td align="center"><input type="radio" name="Q3d_c1" value="2" id="Q3d_c1_2" onchange="if (this.checked){document.getElementById('Q3d_c2_2').disabled=true;document.getElementById('Q3d_c3_2').disabled=true;}else{document.getElementById('Q3d_c2_2').disabled=false;document.getElementById('Q3d_c3_2').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c2" value="2" id="Q3d_c2_2" onchange="if (this.checked){document.getElementById('Q3d_c1_2').disabled=true;document.getElementById('Q3d_c3_2').disabled=true;}else{document.getElementById('Q3d_c1_2').disabled=false;document.getElementById('Q3d_c3_2').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c3" value="2" id="Q3d_c3_2" onchange="if (this.checked){document.getElementById('Q3d_c1_2').disabled=true;document.getElementById('Q3d_c2_2').disabled=true;}else{document.getElementById('Q3d_c1_2').disabled=false;document.getElementById('Q3d_c2_2').disabled=false;}"></td>
</tr>

<tr><td>Feature 3</td>
<td align="center"><input type="radio" name="Q3d_c1" value="3" id="Q3d_c1_2" onchange="if (this.checked){document.getElementById('Q3d_c2_3').disabled=true;document.getElementById('Q3d_c3_3').disabled=true;}else{document.getElementById('Q3d_c2_3').disabled=false;document.getElementById('Q3d_c3_3').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c2" value="3" id="Q3d_c2_2" onchange="if (this.checked){document.getElementById('Q3d_c1_3').disabled=true;document.getElementById('Q3d_c3_3').disabled=true;}else{document.getElementById('Q3d_c1_3').disabled=false;document.getElementById('Q3d_c3_3').disabled=false;}"></td>
<td align="center"><input type="radio" name="Q3d_c3" value="3" id="Q3d_c3_2" onchange="if (this.checked){document.getElementById('Q3d_c1_3').disabled=true;document.getElementById('Q3d_c2_3').disabled=true;}else{document.getElementById('Q3d_c1_3').disabled=false;document.getElementById('Q3d_c2_3').disabled=false;}"></td>
</tr>
</table>
asked Oct 31, 2012 by anonymous
edited Oct 31, 2012 by Walter Williams

1 Answer

0 votes
Even if one changes his/her mind, how can they select the other options, since they are already disabled? If I choose column1, c2 and c3 get disabled, I can't select them anymore, right?

I'd suggest leaving the input buttons alone and checking just before submit via JavaScript and let them know that they can't go forward since they have two or three items selected in the same row...
answered Oct 31, 2012 by Bahadir Ozkurt Gold (16,930 points)
The radio buttons are column based [not row] - so they can change their mind if they choose a different button in the same column.

I have it currently working with js validation at the time of submit - but the client wants it on-the-fly
I realized that it might be the case after I've posted, but thought that the after-check would work as a solution, so I left it as is...

I'll see what I can do now
the problem lies with the onchange event, it does not get fired when a radio button is unchecked!
you can have some example of how to handle it here: http://stackoverflow.com/questions/3790873/i-need-an-event-trigger-for-a-radio-button-for-when-it-is-unchecked-because-anot

one other thing to note; you have skipped renaming the last batch of buttons, their IDs are duplicates of the ones above :)
...