Search code examples
jquerycssbackground-color

JQuery css() selector to set background-color from class


Apologies... I know there are hundreds of questions like this... but I haven't found one which answers what I'm trying to do.

CSS

.inputtable {
  background-color: #ffff66; // yellow
}
.inputtable[ disabled ] {
  background-color: #ddd; // greyed-out
}

JQuery

ajaxGetAddresses.done(function( data, textStatus ) {
    console.log( 'data length: ' + data.length );

    // clear the select
    var s2 = $( '#add_select' );
    s2.empty();
    if( data.length > 1 ){
        // ... select will be "live" 
        s2.prop( 'disabled', false );
        //s2.css( 'background-color', '#ffff66' );
        s2.css( 'background-color', '.inputtable background-color' );
    } else {
        s2.prop( 'disabled', true );
        // s2.css( 'background-color', '#ddd' );
        s2.css( 'background-color', '.inputtable[disabled] background-color' );
    }

I hope this makes sense: if there are 0 or 1 elements (arrays) in data then I want the SELECT to be disabled. And have a grey background. Otherwise I want it to have a yellow background, showing that it can be used.

The "hard-coded" versions of the css commands to set background-color work fine... I'm just unable to work out how I "retrieve" the background-color values from this class (normal and disabled).

Extra details

HTML looks like this:

  <div id="div1" >
    <div id="select_div" ><u>S</u>elect: 
    <select id="secondname_dropdown" size="1" class="inputtable"  ></select>
    </div>
  </div>

...

  <div id="address_number">
    Address <select id='add_select' class='inputtable' ></select> 
    of <span id='number_of_addresses' ></span>
  </div>

Solution

  • Try this may help you.

    ajaxGetAddresses.done(function( data, textStatus ) {
        console.log( 'data length: ' + data.length );
        // clear the select
        var s2 = $( '#add_select' );
        s2.empty();
        if( data.length > 1 ){
            // ... select will be "live" 
            s2.prop( 'disabled', false );
            //s2.css( 'background-color', '#ffff66' );
            s2.addClass( 'inputtable' );
        } else {
            s2.prop( 'disabled', true );
            // s2.css( 'background-color', '#ddd' );
            s2.addClass( 'inputtable').attr("disabled", 'disabled');
        }