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

Question

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>

You should use `addClass()`, `removeClass()`, `attr()` and `removeAttr()` methods. — Ibrahim Khan, May 26 '17 at 17:07
Why use JavaScript and not make other CSS rules that apply to these elements? — epascarello, May 26 '17 at 17:16
@epascarello ... yes, I thought someone might ask that! I have found that certain page elements don't seem to "automatically refresh". I.e. change to disabled and I'm seemingly not automatically getting the disabled colour. I've looked up "refreshing" page elements but no joy there. Obviously I'm quite a newb. — mike rodent, May 26 '17 at 17:18
do you have multiple input? show us the html you have for the select and `#add_select` etc — Dalin Huang, May 26 '17 at 17:20

score 0 · Answer 1 · answered May 26 '17 at 17:14

0

If I am understanding this correctly, you explicitely want the hex value for the background color of a given class. To do so, you can access properties of your CSS by using the .css() function, like the following:

$('.inputtable[disabled] background-color').css('background-color');

This'll return the color to you in an RGB format. This answer here describes how to convert the RBG into a hex value.

answered May 26 '17 at 17:14

Snowie

223
1
3
8

1

That selector makes no sense – epascarello May 26 '17 at 17:15

score 0 · Accepted Answer · answered May 26 '17 at 17:16

0

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

answered May 26 '17 at 17:16

LXhelili

980
5
14

Thanks... in fact the SELECT is already class "inputtable". See comment under Waldemarice. – mike rodent May 26 '17 at 17:23
U can use this alternative then `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.toggleClass( 'inputtable' ); } else { s2.prop( 'disabled', true ); // s2.css( 'background-color', '#ddd' ); s2.toggleClass( 'inputtable').attr("disabled", 'disabled'); }` – LXhelili May 26 '17 at 17:26

score 0 · Answer 3 · answered May 26 '17 at 17:18

.inputtable {
  background-color: #ffff66; // yellow
}

.inputtable-disabled {
  background-color: #ddd; // greyed-out
}

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.removeClass('inputtable-disabled').addClass('inputtable')
} else {
    s2.prop( 'disabled', true );
    // s2.css( 'background-color', '#ddd' );
    s2.removeClass('inputtable').addClass('inputtable-disabled')
}

score 0 · Answer 4 · answered May 26 '17 at 17:19

You only need to control the disabled logic, then CSS will apply the color itself.

Check this example:

/* if (data.length > 1) {
  // ... select will be "live" 
  s2.prop('disabled', false);
} else {
  s2.prop('disabled', true);
} */


$('#tog').on('click', function() {
  if ($('.inputtable').prop('disabled') == true) {
    $('.inputtable').prop('disabled', false);
  } else {
    $('.inputtable').prop('disabled', true);
  }
});

.inputtable {
  background-color: #ffff66; // yellow
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="add_select" class="inputtable">

</select>
<select id="add_select" class="inputtable">

</select>
<select id="add_select" class="inputtable">

</select>

<button id="tog">Toggle disabled</button>

Thanks... yes, I'm getting quite confused... indeed what I initially set out to do was just to set the disabled property, hoping that the elements on the page would automatically update their appearance immediately. But somehow that didn't seem to happen! Will study and continue to experiment... — mike rodent, May 26 '17 at 17:22
@mikerodent wait, show me the HTML you have for the select and the id `add_select` — Dalin Huang, May 26 '17 at 17:23

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

4 Answers4