Question

我正在使用由WooThemes / WooCommerce开发的名为Composite Products的插件。这个插件允许您创建复杂的产品，即如果您想购买双床垫，那么您应该只能选择双箱弹簧和双框架。这个插件的问题在于它还显示了所有其他可用选项，但它们被禁用（灰色）。 目标是完全隐藏它们。

感谢您的帮助。

示例：http://cl.ly/image/1J2P2Y2s2g0V

链接：http://bit.ly/1paEoMM

Answer 1

这适用于所有浏览器，但仅适用于IE9及以上版本：

select option:disabled {
    display:none;
}

这将适用于所有主流浏览器，一直到IE7：

select option[disabled="disabled"]
{ 
    display:none;
}

或者，您可以使用jQuery来定位几乎所有主流浏览器及其早期版本。以下代码将遍历所有选项并检测其disabled属性是否实际上已禁用＆＃39;。如果是，它只是隐藏它。

$('select option').each(function() {
   var thisAttr = $(this).attr('disabled');
   if(thisAttr = "disabled") {
      $(this).hide();
   }
});

Answer 2

你可以使用css轻松解决它

select option:disabled {
    display:none;
}

Answer 3

我刚检出你的网站并复制了一些html进行测试

这有效：

$(function() { 
      // check for options with disabled attribute 
      $('option[disabled="disabled"]').hide(); //then hide them                
});

使用jquery

Answer 4

最近的解决方案是将hidden属性添加到option元素：

<option value="MyValue" hidden>MyText</option>

在下拉菜单中隐藏“已禁用”选项

4 个答案: