Change Background Color with jQuery

I have a form with multiple drop downs... I would like to set the background color of the visible dropdowns to gray when they are disabled. All of these dropdown's id's begin with usrControl. Here is what I have this far..

    $('select[id ^= "usrControl"]:visible').each(function(){
this.css("background-color")
});

Not sure how to get the disabled/enabled selectors.

Thanks in advance

Protected _picklistColorScriptText As String = "$(document).ready(function(){ " + _
                                                "$('[id ^= ""usrControl""]:visible:disabled').css(""background-color"", '#DCDCDC'); " + _
                                                "$('[id ^= ""usrControl""]:visible:enabled').css(""background-color"", '#FFFFFF');" + _
                   开发者_如何学编程                             "});"

This works. However, this sets the background for the entire control to gray, how can I change the color of the selected item to gray?

You can use the :disabled pseudo-selector. Plus you don't need jQuery.each. Just work against the returned nodeset.

$('select[id ^= "usrControl"]:visible:disabled').css("background-color", 'gray');

Working example here: http://jsfiddle.net/Cwm4W/

UPDATE: Responding to OP's clarification below, you can simply select the contained option like so:

$('select[id ^= "usrControl"]:visible:disabled option').css("background-color", 'gray');

Working example here: http://jsfiddle.net/Cwm4W/1/

You are only getting the CSS property. Try this:

$(this).css( "property", "value" );

I believe you are looking for

$('select[id ^="usrControl":visible:disabled].each(...