当所选选项被禁用时，样式选择文本。

Question

我在HTML页面上有一个，其中包含多个选项；一些选项被禁用（但select并未禁用）。我可以为被禁用的选项设置样式：select option:disabled { color: red; } 然而，如果所选项目被禁用，我也希望对其进行样式设置。用户无法进入此状态，但页面在此状态下提供是有可能的。 如果所选项目被禁用，如何为select设置样式呢？

- ctrl-alt-delor

---

当选择框被禁用时，您将无法看到选项。您可以样式化选择框以更改选择框中的文本，据我所知。 - Gray

@Gray，选择已启用，但某些选项已禁用。请重新阅读问题。 - ANeves

你介意使用 JavaScript 吗？ - T J

@ANeves 感谢您的澄清。我现在明白了。 - Gray

@TilwinJoy 我会使用js，目前我正在大量使用knockout，我尝试了optionsAfterRender绑定，这个绑定可以设置一个类，但是当我选择另一个选项时，它需要重新评估（但实际上没有）。 - ctrl-alt-delor

@richard 如果我理解正确的话，我已经分享了一个可能的解决方案。 - T J

Answer 1

此选项使用selected属性，并使用jQuery。这是一个示例的fiddle：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;}

- Gray

---

为什么不直接删除颜色属性，而不是将颜色设置为“initial”？ - ANeves

@ANeves 我没有这样做...也许你想回答另一个问题？我将其设置为黑色，我觉得我会把它留给读者作为一个练习来设置正确的颜色。我应该删除哪个属性？Style属性吗？也许你可以更新fiddle以展示你的意思。 - Gray

我错了。:( 我的意思是用“黑色”而不是“初始”，是这样的：http://jsfiddle.net/nx23C/1/ - ANeves

@ANeves 啊，我明白了...所以根本不使用.css()。如果我已经在使用jQuery，那么有什么优势呢？我有点理解...如果可以完全避免使用jQuery，那么这样做可能是有意义的，但这不是你建议的。我认为将其设置为初始值可能比使用黑色更好，但我想象这将用作验证错误...在这种情况下，我会切换一个类（可能使用jQuery）:P - Gray

如果你最初在CSS中将它设置为粉色，然后将其从红色改回黑色（而不是粉色），它就无法正常工作；如果你将其设置为粉色，可能会变成蓝色！（你无法轻易猜测CSS的值。）我同意切换类是理想的方法。 - ANeves

+1 谢谢，这个答案启发了我的解决方案（已添加为答案）。 - ctrl-alt-delor

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。

- T J

---

为什么不直接移除颜色属性，而不是将颜色设置为“initial”？请参考此处删除颜色属性的方法。 - ANeves

+1 谢谢，这个答案启发了我的解决方案（已添加为答案）。 - ctrl-alt-delor

Answer 3

有一种纯CSS解决方案，采用CSS :has()选择器，现在被广泛应用于Web浏览器中。

select option {
  color: black;
}
select option:disabled {
  color: grey;
}
select:has(option:checked:disabled) {
  color: red;
}

<select>
  <option value="1">apples</option>
  <option value="2">oranges</option>
  <option value="3" disabled selected>bananas</option>
</select>

- gwyn

Answer 4

我建议你为选择框添加一个类，并在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/。

- ANeves

---

+1 谢谢，这个答案启发了我的解决方案（已添加为答案）。 - ctrl-alt-delor

Answer 5

谢谢大家。最终我做了以下的事情，在很多答案和评论的帮助下。

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

- ctrl-alt-delor

---

ko 是什么？它有什么作用..?! 假设您将此作为答案发布给其他人的问题，他们是否能理解任何内容..? 顺便说一下，通过收集所有答案来发布自己的答案，而不是选择帮助您找到解决方案的答案，真的很令人沮丧。我不认为这就是 SO 的工作方式。但很高兴知道答案激发了您的灵感~! - T J

ko 是 knockout.js 库。 - ctrl-alt-delor

我通常不这样做，但这是我第一次这样回答。然而，并没有一个正确的答案。只有三个答案对我很有帮助，所以我给它们都点了赞。 - ctrl-alt-delor

Answer 6

这可以用 jQuery 实现。

想象一下你有这个：

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

在加载函数中，你可以放置以下代码：

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

- Newton

---

那只是样式选项，对吧？我想你应该这样做：$(this).parent.css("color","red")。 - Gray

Answer 7

选择器 Level 4 草案引入了选择器的主题，它允许您使用

!select option:disabled
{ 
  color: red;
}

但浏览器目前还不支持它。

- Oriol

---

有趣的是：当实现时，它会选择至少有一个禁用选项的“select”，而不是选择已禁用选项的“select”。 - ctrl-alt-delor

@richard 你可以这样做... !select option:selected:disabled，我相信（假设你的选项有selected属性）。 - Gray