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

Question

我正在容器上使用jQuery-ui复选框，该容器上具有类ui-widget-content。 这将导致定义背景属性的“ .ui-widget-content .ui-state-hover” css规则覆盖为定义复选框图像的正确背景位置的.ui-icon-check规则。 我相信这是因为它更具体。

结果是小部件中的复选框显示错误的图像。 我该如何处理？

这是一个jsfiddle示例 。 在第二个具有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");

希望能有所帮助。

更新资料

找到了一些有趣的东西，但仍然有点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，并再次搞砸了。