Question

I have a form that I want to present in two states:

1) Normal form

2) Person can look at the form as filled out by a user but can’t change anything

It’s easy to handle text inputs with the readonly property, but radio buttons, checkboxes, and dropdown menus don’t use it. I can set the “disabled” property for those, but in most browsers they show up grayed out and barely visible. What I really want is for them to look like a normal form but be unclickable the way a disabled element is. Is there a way to override the normal “disabled” look? Or is the solution to disable them in some roundabout way handling clicks?

I’m using jQuery for most of this stuff, if that matters…

Answer 1

well, you could try hacks like this….

​$(':radio:disabled').removeAttr('disabled').click(function(){
    this.checked=false;
})​;

this will select all disabled radio buttons and enabled it but when click, will not be checked…

demo

and on <select>

you could do like,

$('select:disabled').removeAttr('disabled').change(function(){
    $(this).find('option').removeAttr('selected');
    // this.value = this.defaultValue; // you may also try this..
});