Question

我在容器中使用了一个jquery-ui复选框，其中包含类ui-widget-content。这导致＆＃34; .ui-widget-content .ui-state-hover＆＃34; css规则定义background属性以覆盖.ui-icon-check规则，该规则定义复选框图像的正确背景位置。我相信这是因为它更具体。

结果是窗口小部件中的复选框显示错误的图像。我该怎么处理？

Here is a jsfiddle example。在我有ui-widget-content类的第二个div中，您可以看到选中的图像是错误的。

<div class="ui-widget-content">
<label for="cb3">Test 1</label>
<input type="checkbox" id="cb3" class="toggle"/>
<label for="cb4">Test 2</label>
<input type="checkbox" id="cb4" class="toggle" checked="checked"/>
</div>

请注意，我无法更改父div。我正在一个需要该课程的对话框中工作。

我很惊讶我找不到其他人抱怨这件事。我不确定我错过了什么。

Answer 1

所以.ui-icon-check类被后来的样式覆盖了。你可以把它写回来。

一个例子：https://jsfiddle.net/Twisty/ewabcy3g/2/ （固定为空白）

<强> CSS

.ui-widget-content label span.ui-icon-check {
  background-position: -64px -144px;
}
.ui-widget-content label span.ui-icon-blank {
  background-position: 16px 16px;
}

另一个例子：https://jsfiddle.net/Twisty/ewabcy3g/1/

<强>的jQuery

$('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
}).find(".ui-icon-check").css("background-position", "-64px -144px");

希望有所帮助。

<强>更新

找到了一些有趣的东西，但它似乎有点帮助：

https://jsfiddle.net/Twisty/ewabcy3g/3/

当我删除checked属性并通过jQuery设置它时，如下所示：

$('.toggle').checkboxradio();
$("#cb4").attr("checked", true);
$('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
});

我可以删除CSS黑客攻击。我发现将CSS定位设置回来，它仍然在读取悬停背景图像并且没有保留适当的样式。

然后我尝试将checked="checked"添加回HTML并再次搞砸了。

如何在窗口小部件中使用jquery-ui复选框？

1 个答案: