Apply css styles to all elements that become/are disabled

Question

I need to be able to apply css styles to all elements that are/become disabled

$(document).ready(function() {
  $("input type:checkbox").attr("disabled", true).css("border","1px solid #000000");
});

doesn't seem to work. any ideas?

Answer 1

Try :checkbox and :disabled selectors

$(document).ready(function() { 
  $("input:checkbox:disabled").css("border","1px solid #000000"); 
}); 

Also it would be better if you add a class for that instead of applying css directly. Something like

.disabledcheckbx { border: 1px solid #000; }

and then

$(document).ready(function() { 
  $("input:checkbox:disabled").addClass("disabledcheckbx");
}); 

Answer 2

That will attempt to set every checkbox's disabled attribute to true.

You want this:

$(document).ready(function() {
  $(':checkbox:disabled').css('border', '1px solid #000;');
});

Answer 3

styling checkboxes is not widely supported by most browser as you can see in this test.

but if you really want it, you may try this plugin