禁用所选选项时选择样式文本

Question

我的HTML页面上有<select>个<option>个;某些选项被禁用（未禁用选择）。我可以设置禁用选项的样式：

select option:disabled
{ 
    color: red;
}

但是，如果禁用，我还想设置所选项目的样式。用户无法进入此状态，但可以在此状态下提供页面。

如果选择的项目被禁用，我如何设置选择样式？

Answer 1

此选项使用selected属性，它也使用jQuery。这是一个显示示例的小提琴：JsFiddle

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery（onLoad）

$('select > option:selected:disabled').each(function(){
    $(this).parent().css("color","red");
});

$('select').change(function(){
    $(this).css("color", "black");
});

CSS

/*reset color for options*/
select option:not(:disabled) {color:black;}

Answer 2

如果使用js不是问题，

您可以在页面load事件中执行以下操作：

var elem = document.getElementById('idOfYourSelect');
  var selectedOption= elem[elem.selectedIndex];
  if(selectedOption.disabled == true){
   elem.style.color='red'; // apply the styles
}

并在选择时将其更改回正常状态（如果您愿意）

elem.onclick= function(){
elem.style.color='initial'; // revert back to normal style
}

检查此fiddle

Answer 3

我建议你在select中添加一个类，并在CSS中设置它的样式。然后，当用户将选择更改为有效的内容时，您将删除该类。

实施例

这是一个使用jQuery的简单实现：

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery（onLoad）

$('select > option:selected:disabled').each(function() {
    var select = this.parentNode;
    select.classList.add("select-with-disabled-selected-option");
    $(select).change(function() {
        this.classList.remove("select-with-disabled-selected-option");
    });
});

CSS

.select-with-disabled-selected-option {
    color: red;
}

您可能不需要jQuery

我使用jQuery使其更简单 但是http://youmightnotneedjquery.com/

Answer 4

谢谢大家。这是我最终做的，在很多答案和评论的帮助下。

<script type="text/html" id="fkeyByName-template">
  <select data-bind="optionsCaption: 'Choose...',
             optionsText:  function(item){ return item.value.name;},
             optionsValue: function(item){ return item.id;},
             valueAllowUnset: true, 
             options: (function(){return $root.foreignKeys.values(col.ftype);})(),
             value: value,
             optionsAfterRender:function(option,item){
               $root.setOptionDisable(option,item,value,$element,$data);
             }
             ">
  </select>
  {{! <p data-bind="text: value"></p> }}
</script>

<script type="text/javascript">
  model.setOptionDisable = function (option, item, value, select, data) {
    if (item) {
      ko.applyBindingsToNode(option, {disable: item.value.removed}, item);
      if (value() == item.id) {
        ko.applyBindingsToNode( select,{css: {disabledSelected: item.value.removed}}, data); 
      }
      select.onchange = function() { 
        ko.applyBindingsToNode( select,{css: {disabledSelected: false}}, data); 
      };
    } 
  }
</script>

<style>
select option:disabled, select.disabledSelected
{ 
  color: red;
} 

/*reset color for options*/
select option:not(:disabled) 
{
  color:initial;
}
</style>

Answer 5

可以使用jquery。

想象一下你有这个：

<select class="sel">
   <option disabled="true">one</option>
   <option>two</option>
   <option disabled="true">three</option>
   <option>four</option>
</select>

onload函数你可以把它放在：

$('.sel option[disabled="true"]').each(function () {
    $(this).attr('style', 'color:red');
});

Answer 6

Selectors Level 4草案介绍Subject of a Selector，允许您使用

!select option:disabled
{ 
  color: red;
}

但是浏览器还没有支持它。