How to "lock" radio buttons, checkboxes, and <select> menus without graying them out?

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

Just replace them with your own more controllable HTML/CSS construct, à la Niceforms, et al. (with disabled or readonly attribute, as appropriate, as fallback).

Answer 2

A suggestion rather an answer: you can associate an event with the state change of an element, and cancel the change.

You can do it the same way as the validate tools which allows to enter only digits or only some characters in <input type="text" /> fields. See a StackOverflow post about this.

Another solution is to put something in front of your controls. For example:

<div style="position:absolute;width:200px;height:200px;"></div>
<input type="radio" />

will make your radio button unclickable. The problem is that doing so will prevent the users to copy-paste text or using hyperlinks, if the <div/> covers the whole page. You can "cover" each control one by one, but it may be quite difficult to do.

Answer 3

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..
});