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

时间:2016-09-30 15:27:33

标签: javascript jquery jquery-ui

我在容器中使用了一个jquery-ui复选框,其中包含类ui-widget-content。这导致" .ui-widget-content .ui-state-hover" 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。我正在一个需要该课程的对话框中工作。

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

1 个答案:

答案 0 :(得分: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并再次搞砸了。