Search code examples
javascriptinputradio-button

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.

So for instance with this radio list:

 <input type="radio" name="group2" value="Water"> Water<br />
 <input type="radio" name="group2" value="Lemonade"> Lemonade<br />
 <input type="radio" name="group2" value="Juice"> Juice<br />

I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.

This needs only to be compatible with Internet Explorer.

I cannot use JQuery! Please don't paste JQuery because it will not help me!

Thanks!

Solution

  • Just disable it with the "disabled" property.

    Give it an "id" to fetch it more easily:

    document.getElementById("radioButtonX").disabled = true;

    (It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.

    If you want to do it with HTML, you can use the attribute:

    <input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->