Question

当我点击禁用'Li Point1'时，这个小提琴变成了灰色http://jsfiddle.net/adrianjsfiddlenetuser/Q9sHz/14/

可以保持元素的原始样式（不是灰色）吗？

Answer 1

您有三种选择。您可以从jquery-ui.css中删除.ui-state-disabled的样式，您可以覆盖自己的自定义样式表中的样式，也可以将更改的属性标记为!important。

删除样式

要删除样式，您需要编辑jquery-ui.css并查找.ui-state-disabled规则（在jQuery 1.7.2中，它在第262行）。删除其中的所有样式（您将看到三个，opacity，filter和background-image。

这样做的缺点是，如果您更新jQuery并获得一个新的CSS文件，那么您将失去编辑。

添加自己的样式表

您可以为.ui-state-disabled添加自己的规则，并更改已禁用元素的样式。由于ui-state-disabled用于禁用的jQuery中的所有内容，因此我建议将您的规则定义为li独占，或者在ul上设置一个类，并为此专门定义样式

<ul class=".noStyleDisableDrag">
    ...
</ul>

.noStyleDisableDrag .ui-state-disabled {
    opacity: 1;
    filter: none;
    background-image: inherit;
}

标记为！important

您还可以将不透明度，滤镜和背景图像样式添加到定义特定项目应如何显示的其他规则，并使用!important标志。但是，这不是最推荐的做事方式，因为如果你忘了你标记它，它会对你的CSS风格调试造成严重破坏，但它是一个选项。为此，您只需为li设置样式：

li {
    opacity: 1 !important;
    filter: none !important;
    background-image: (whatever you want, or none) !important;
}

请注意，在这种情况下，如果您没有在可拖动的背景图像上设置背景图像，那么您不需要该线来设置背景图像;只需设置opacity和filter即可取消覆盖。另请注意，这些可以被JavaScript覆盖，因此它们不是一成不变的。

在这三者中，您可能需要使用组合。我的建议是使用您自己的自定义样式表来覆盖opacity和filter属性。如果您使用的是背景图片，则可能需要使用!important来阻止其被ui-state-disabled规则删除。但请尽可能少地使用!important标志。

Answer 2

第262行jquery-ui.css删除过滤器和不透明度线

 .ui-state-disabled, .ui-widget-content .ui-state-disabled,
 .ui-widget-header .ui-state-disabled {
     background-image: none; 
 }

Answer 3

单击禁用按钮会向元素添加CSS类ui-state-disabled。只需覆盖该类的样式。

.ui-state-disabled { opacity:1; }

禁用draggable时不要更新css

3 个答案: