5

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

谢谢您的帮助。

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

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

4

4 回答 4

9

这适用于所有浏览器,但仅适用于 IE9 及更高版本:

select option:disabled {
    display:none;
}

这将适用于所有主要浏览器,一直到 IE7:

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

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

$('select option').each(function() {
   var thisAttr = $(this).attr('disabled');
   if(thisAttr = "disabled") {
      $(this).hide();
   }
});
于 2014-05-20T23:11:03.907 回答
5

您可以使用 css 轻松解决它

select option:disabled {
    display:none;
}
于 2014-05-20T23:07:33.760 回答
2

我刚刚查看了您的网站并复制了一些 html 进行测试

这有效:

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

使用 jQuery

于 2014-05-20T23:15:55.527 回答
0

最近的解决方案是将 hidden 属性添加到选项元素:

<option value="MyValue" hidden>MyText</option>
于 2019-07-17T12:20:00.870 回答