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:
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:
1
| secondRadioButtonList.InputAttributes.Add(”disabled”, “disabled”); |
rather than
1
| secondRadioButtonList.Enabled = false; |
