Question

道歉......我知道有数百个这样的问题......但是我找不到一个可以回答我想做的事情。

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

我希望这是有道理的：如果data中有0或1个元素（数组），那么我希望禁用SELECT。并有灰色背景。否则我希望它有一个黄色背景，表明它可以使用。

设置background-color的css命令的“硬编码”版本工作正常......我只是无法弄清楚如何从此类中“检索”background-color值（正常和残疾）。

额外详情

HTML看起来像这样：

  <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>

Answer 1

如果我正确理解了这一点，那么您明确地希望给定类的背景颜色的十六进制值。为此，您可以使用.css（）函数访问CSS的属性，如下所示：

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

这将以RGB格式返回颜色。这个answer here描述了如何将RBG转换为十六进制值。

Answer 2

试试这可能会对你有所帮助。

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

Answer 3

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

Answer 4

您只需要控制禁用的逻辑，然后CSS将应用颜色本身。

检查此示例：

＆＃13;

/* 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);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

JQuery css（）选择器用于设置类

4 个答案: