How to set CSS for disabled checkboxes?

Question

I'd like change the CSS for disabled checkboxes in a grid (they are too hard to see, per the users). What is a simple way to do this?

My preference in technologies used (in descending order):
CSS
JavaScript
jQuery
Other

Answer 1

Ive had good luck with a few JS libraries to do the work. Granted my requirement was to make the boxes look very different from the standard check box. The following library is even 508 compliant.

Styled Form Controls

Answer 2

basically, you need to attach onclick event on div, p, or any other element used for a grid and then transfer the checked value into hidden element associated with that field in a grid. which is very trivial, if javascript is used - check jquery to add onclick event on any element. if clicked, set value=1 for hidden element.

Answer 3

I'd suggest changing the colour of the background (the background-color of the form/fieldset), and see if you can come up with a better contrast. If you just want to change the colour of disabled (non-selectable?) checkboxes you can try:

input[disabled="true"] {
...
/* CSS here */
...
}

But if they're disabled for a reason, surely they don't need to be prominently visible? The aim for their being greyed-out is, surely, to avoid confusion between active/enabled and inactive/disabled form elements?

Answer 4

input:disabled {} works for every browser except—you guessed it—IE. For IE, I guess you'll have to use some JS library.