I have what should be a problem with a simple solution, and I'm sure I'm just missing something.
I have 2 columns of radio buttons, and when a radio button from a column is clicked, I need to disable the corresponding radio button from the opposite column, so it can't be selected. Then if another button is selected, re-enable the previous button and disable the new opposite selection.
I have given all the radio buttons a unique id. first1, first2, etc. for column one, and second1, second2 etc. for column two.
The way I was headed towards won't work after re-thinking this, and after searching online for an hour, I haven't found a non-jquery way of doing it. Is it possible with javascript?
What I had so far, and I know I'm way off base, but I'm burnt out with the different problems I've had with this page:
function disableForm(theform, theradio) {
//this was a start but does't save valid disabled fields
//it just enables everything
if (document.all || document.getElementById) {
for (i = 0; i < theform.length; i++) {
var formElement = theform.elements[i];
if (true) {
formElement.disabled = false;
}
}
}
document.getElementById(theradio).onclick = function(){
document.getElementById(theradio).disabled=true;
}
}
Let's say you define your radios as
<table style="width: 100%;">
<tr>
<td>
<input id="Radio1_1" type="radio" name="Radio1" onchange="process(this)"/><br />
<input id="Radio1_2" type="radio" name="Radio1" onchange="process(this)"/><br />
<input id="Radio1_3" type="radio" name="Radio1" onchange="process(this)"/><br />
<input id="Radio1_4" type="radio" name="Radio1" onchange="process(this)"/><br />
<input id="Radio1_5" type="radio" name="Radio1" onchange="process(this)"/>
</td>
<td>
<input id="Radio2_1" type="radio" name="Radio2" /><br />
<input id="Radio2_2" type="radio" name="Radio2" /><br />
<input id="Radio2_3" type="radio" name="Radio2" /><br />
<input id="Radio2_4" type="radio" name="Radio2" /><br />
<input id="Radio2_5" type="radio" name="Radio2" />
</td>
</tr>
</table>
Then the goal can be achieved by a simple script:
function process(rb) {
//clearing previos disabled
for (i = 0; i < document.getElementsByName("Radio2").length; i++) {
document.getElementsByName("Radio2")[i].disabled = '';
}
document.getElementById(rb.id.replace('Radio1','Radio2')).disabled='disabled';
}
Working example: http://jsfiddle.net/bbGDA/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.