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

我正在容器上使用jQuery-ui复选框，该容器上具有类ui-widget-content。这将导致定义背景属性的“ .ui-widget-content .ui-state-hover” css规则覆盖为定义复选框图像的正确背景位置的.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。我在需要该类的对话框中工作。

我很惊讶我找不到其他人对此抱怨。我不确定我缺少什么。

最佳答案

因此，.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");

希望能有所帮助。

更新资料

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

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

当我删除选中的属性并通过jQuery进行设置时，如下所示：

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

我可以删除CSS hacks。我发现将CSS位置放回原处，它仍在读取悬停背景图像，而没有保留正确的样式。

然后，我尝试将checked="checked"添加回HTML，然后又被搞砸了。

关于javascript - 如何在小部件中使用jquery-ui复选框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39795026/