.NET 4 Radiobuttons are NOT XHTML 1.1 Compliant

If you are a stickler like me then you are all about making sure everything you develop is compliant to W3C standards. This is as important as starting every sentence with a capital – ignore the rules and you look unprofessional and sloppy.

This can get challenging when working with server side scripting languages that render a lot of the HTML for you, like ASP.NET. Although .NET 4 does a pretty good job adhering to the XHTML 1.0 strict rules (although I would prefer XHTML 1.1) it breaks it when you have a radiobutton server control in your web app that is disabled. To disable it, the .NET 4 runtime adds a <span> tag around the <input type="radio"> tag. Wrong, Wrong, Wrong! The disabled attribute can’t be inside a span tag.

I still really wanted to disable the radio buttons (duh!) so to get around it I used JQuery. This is definately a hacky of a solution, but when it comes to W3C validation tactics it is in good company.

First I linked in the JQuery library:
<script type="text/javascript" src="resources/jquery-1.4.2.min.js"></script>

Second I setup the JQuery to disable four radio buttons INSIDE a panel and set its visible property to false so it isn’t rendered into the HTML until I want it to…

<asp:Panel ID="pnlJQuery" Visible="false" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("[type='radio']").attr("disabled", "disabled");
});
</script>
</asp:Panel>

Whenever I want to disable all the radio buttons on the page all I need to do is set the panel to be visible (visible = true). The JQuery inside will then be rendered into the page’s HTML and the browser will happily execute it – thus disabled radio buttons!
pnlJQuery.Visible = True