setting Radio Button enabled/disabled via CSS

Question

Is there a way to make a Radio Button enabled/disabled (not checked/unchecked) via CSS?

I've need to toggle some radio buttons on the client so that the values can be read on the server, but setting the 'enabled' property to 'false' then changing this on the client via javascript seems to prevent me from posting back any changes to the radio button after it's been enabled.

See: ASP.NET not seeing Radio Button value change

It was recommended that I use control.style.add("disabled", "true") instead, but this does not seem to disable the radio button for me.

Thanks!

Answer 1

Disabled is a html attribute, not a css attribute.

Why can't you just use some jQuery

$('#radiobuttonname').attr('disabled', 'true');

or plain old javascript

document.getElementById(id).disabled = true;

Answer 2

To the best of my knowledge CSS cannot effect the functionality of the application. It can only effect the display. So while you can hide it with css (display:none) you can't disable it.

What you could do would be to disable it on page load with javascript. There are a couple ways to do this but an easy way would be to do something like

<script>document.getElementById('<%=CONTROLID%>').disabled=true;</script>

and put that in your .aspx file at the top below the body tag.

Answer 3

CSS is for changing presentation. JavaScript is for changing behaviour. Setting an element to be enabled or disabled is behaviour and should done in JavaScript.

Answer 4

if you look at the html generated by asp.net for a disabled radio button, you'll see that the button is embedded in a span tag, and the disabled attribute of the span is set to true. perhaps javascript to target an enclosing span will do the trick for you