如何使jQueryUI的图标呈现出禁用状态？

Question

有没有一种方法可以禁用jquery中的图标？例如，我正在使用ui-icon-circle-triangle-w和ui-icon-circle-triangle-e表示“上一个/下一个”，我想在列表开头禁用“上一个”，在末尾禁用“下一个”等。

- Tim Martin

Answer 1

我猜这个应该很明显，但在如何使用图标的主要文档中并没有提到。您只需要将类ui-state-disabled添加到元素中。例如，如果通过JavaScript实现，则可以执行以下操作：

$('<selector>').addClass('ui-state-disabled');

- Tim Martin

Answer 2

您可以设置 .ui-icon 不显示，这也应该隐藏图标。您可能需要或不需要 "!important" 部分。

.ui-icon { display: none !important; }

- producerism

---

谢谢，但我实际上希望图标仍然显示，但是看起来是禁用的（变灰）。请查看我的答案，以了解我想出的解决方案。 - Tim Martin

Answer 3

这是旧的内容，但我今天遇到了，所以我想整理一下。.addClass('ui-state-disabled')将应用CSS使其看起来被禁用。但是，如果您已将事件绑定到图标，则仍将触发该事件。您还必须确保您的JS知道何时它被禁用。也许使用if hasClass('ui-state-disabled')。但只添加CSS类不会“禁用”图标。

- Ominus

Answer 4

如果您想保留对角线“se”句柄而不带图标，则最好的方法是：

.ui-icon { background-image:none     !important; }

- tomboul

Answer 5

你无法将它们禁用，因为它们不是 HTML 元素，所以最好的方法是使用 'unbind()' 方法，例如： $('#icon-plus-sign').unbind('click');

- eb01111

Answer 6

您可以在元素上添加css opacity:0.7。我认为这不仅对文本有用，对于元素中的图标或其他元素也很有用。

我写了一个演示

关键组件是：

.disable{
    opacity:0.7;
}

...并且这个演示带有图标

- Jesse

---

这个答案被系统标记为“低质量检查”。我可以看到它实际上是一个答案，但如果您提供一些更多的上下文，例如显示如何添加该语法，它可能会更有帮助。正确的语法也可以避免审阅者匆忙地将其标记为“低质量-删除”。我已经修复了语法，但只有您可以添加必要的上下文。 - GreenAsJade

@GreenAsJade 我修改了我的答案。 - Jesse

不错！我稍微详细地阐述了一下，因为另一个触发警报的事情是仅依赖于链接的答案 :) 希望你不介意我的干预。感谢你的贡献！ - GreenAsJade

@GreenAsJade，你的建议对我很有帮助，我不会介意，谢谢 :) - Jesse