javascript disable a single radio button

Question

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;
    }
}

Is it possible to define other groups? first1 and second1, first2 and second2, ... so that a button will always be unselected if you select the other one? So you don't have to disable anything via JavaScript. — xmashallax
@xmashallax up to 2 options can be selected, but not 2 of the same. I'm not following how you are suggesting. — John
Please, please don't describe HTML at us. Show us, with actual HTML code here and, ideally, a simple (SSCCE) live demo that we can work with. Describe a user-interaction and what happens, how it fails and what you want to happen (in response to what). — David Thomas

Yuriy Galanter Yuriy Galanter · Accepted Answer · 2013-08-07T21:42:53

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/

javascript disable a single radio button

1 Answers