Enabling & Disabling ASP.NET radio buttons using code-behind and JavaScript

I have just come across a strange problem when trying to disable some radio buttons on a web page using .NET and JavaScript. It seems to work well in Firefox but not IE, what a surprise!

The situation:

I have two sets of radio buttons – two RadioButtonList controls. The first set needs to control the second set – that is, when one of the radio buttons in the first set is selected, the other RadioButtonList control should be enabled, and when the other of the radio buttons in the first RadioButtonList control is selected, the second RadioButtonList control should be disabled.

In my code-behind, I had an event handler for the first RadioButtonList control to check if the selected index had changed. If so, check the value of the first RadioButtonList control and if it’s say equal to 1, then set the Enabled property of the second RadioButtonList control to false. Otherwise, set the Enabled property to true.

Obviously this alone doesn’t fix the problem unless the first RadioButtonList control is set to AutoPostBack = True. I needed some code on the client side to do this when while the user wasn’t posting the page back.

The code to disable some radio buttons is simple:

?View Code JAVASCRIPT
1
2
3
4
var secondRadioButtons = document.form1.secondRadioButtonList;
for(var i=0; i<secondRadioButtons.length;i++ ){
    document.form1.secondRadioButtons[i].disabled = false;
}

The problem:

When you wire all this up, it works fine in Firefox… But does it work in IE? No, of course not. So why not? I found that when I first loaded the page, the radio buttons were enabled / disabled as they should have been. Clicking on the first set of radio buttons was disabling / enabling the second RadioButtonList control as it should have. But as soon as I posted the page back (the page had a button that submitted a form and displayed some results), the second RadioButtonList control was completely disabled and no matter which of the first radio buttons I selected, I couldn’t re-enable it. I stuck some debug code in my JavaScript only to find that it was running correctly and firing when it should. As far as I could tell, the JavaScript was setting disabled = false (as above) on all of the radio buttons in the second RadioButtonList control, but they were still disabled. Why!?

I took a look at the source code for the page and noticed something that I thought might have been causing the problem I was experiencing. Basically, browsers renders an asp:RadioButtonList control like this:

1
2
3
4
5
6
<span id="secondRadioButtonList">
<input id="secondRadioButtonList_0" name="secondRadioButtonList" value="1" type="radio" />
    <label for="secondRadioButtonList_0">First radio button</label>
<input id="secondRadioButtonList_1" name="secondRadioButtonList" value="2" type="radio" />
    <label for="secondRadioButtonList_1">Second radio button</label>
</span>

If you disable a RadioButtonList in your code-behind, the same asp:RadioButtonList control will be rendered like this:

1
2
3
4
5
6
7
8
<span id="secondRadioButtonList" disabled="disabled">
    <span disabled="disabled">
<input id="secondRadioButtonList_0" name="secondRadioButtonList" value="1" disabled="disabled" type="radio" />
        <label for="secondRadioButtonList_0">First radio button</label>
<input id="secondRadioButtonList_1" name="secondRadioButtonList" value="2" disabled="disabled" type="radio" />
        <label for="secondRadioButtonList_1">Second radio button</label>
    </span>
</span>

This is precisely why I don’t like asp controls – they look nice in the html that you write yet when they render out to the browser, they’re filled with extra stuff like these two spans.

Anyway, the problem were these spans – obviously even though I was setting ‘disabled = true’ on all the radio buttons inside my asp:RadioButtonList control, there were a couple of spans around the radio buttons that were also disabled causing my radio buttons to appear disabled regardless of their individual status.

The solution:

My solution to this was to simply remove the code-behind that I had written to enable or disable the RadioButtonList control on the server side. My JavaScript is all I really need.

However, if you desperately want or need to have some server-side code also disabling your radio buttons, you should do so like this:

?View Code CSHARP
1
secondRadioButtonList.InputAttributes.Add(”disabled”, “disabled”);

rather than

?View Code CSHARP
1
secondRadioButtonList.Enabled = false;
If you liked this post, share it!
Facebook Twitter Linkedin Delicious Digg Stumbleupon Email

6 thoughts on “Enabling & Disabling ASP.NET radio buttons using code-behind and JavaScript

  1. I also have 2 sets of radiobuttonlist controls, but can’t get the 2nd set to be enabled on the client-side in IE (FF works fine) when it is disabled on the server-side.

    I’ve replaced rblList.Enabled = False with rblList.Attributes.Add(“disabled”, “disabled”) in the code-behind, which removed disabled=”disabled” from the span tag.

    This is how the HTML is rendered:

    Please help! Thanks in advance.

  2. Hi Camy,

    What version of .NET are you using? In my example I was using .NET 1.1. I have just discovered that later versions of .NET (2 and above) do not render RadioButtonLists as spans but as tables instead. This means that for .NET 2 and above, my solution won’t work.

    Let me know what version of .NET you are using and I’ll see if I can fix it.

    Cheers. :)

    PS I cannot see your example of how your HTML is being rendered. Do you have somewhere on another site that you can link to for an example of yours?

  3. Hi,

    This is about allowing it to be enabled on the client/side. I am having problems figuring that the control was enabled in the client on a postback. The enabled property still shows me “false” for the control.

    Please help.

  4. Hi,
    I’m having the same type of issue, only with an HtmlInputText control. I’m using .Net 2.0 with code behind in VB. In my code behind I’ve tried both:

    txtInput.Attributes.Add(“disabled”, “disabled”)
    and
    txtInput.Disabled = True

    For both, when I look at txtInput.disabled on the client side during the onload event it is set to false. Not sure what I’m doing wrong.

    aspx code:

    js:
    var txtInput = document.getElementById(“txtInput”);
    if (txtInput.disabled != false) {

    }

    Well, does stuff even when the txtInput control is disabled on the server.

    Thanks in advance for any help!

  5. Hi,

    I had the same problem with span tags.. Your tip saved me from wasting many more hours trying to figure out the solution.
    Thank you very much.

  6. Very usefull tip. One correction though:

    secondRadioButtonList.InputAttributes.Add(”disabled”, “disabled”);

    should read (in VB at least, but probably in C# as well):

    secondRadioButtonList.Attributes.Add(”disabled”, “disabled”);

Leave a Reply

Your email address will not be published. Required fields are marked *