How do I use jquery-ui checkbox within widget?

Question

I am using a jquery-ui checkbox within a container that has class ui-widget-content on it. This is causing the ".ui-widget-content .ui-state-hover" css rule that defines the background property to override the .ui-icon-check rule that defines the correct background-position for the checkbox image. I believe this is because it is more specific.

The result is that a checkbox within a widget shows the wrong image. How should I handle this?

Here is a jsfiddle example . In the second div where I have the ui-widget-content class, you can see the checked image is wrong.

<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>

Note that I can't change the parent div. I am working within a dialog that requires that class.

I am surprised I can't find anybody else complaining about this. I am not sure what I am missing.

Answer 1

So the .ui-icon-check class is being overwritten by a later style. You can just write it back.

One Example: https://jsfiddle.net/Twisty/ewabcy3g/2/ (Fixed for blank)

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;
}

Another Example: https://jsfiddle.net/Twisty/ewabcy3g/1/

jQuery

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

Hope that helps.

Update

Found something interesting, still a bit of a hack but it seems to help:

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

When I removed the checked attribute and set it via jQuery, like so:

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

I could remove the CSS hacks. I found that setting the CSS positioning back, it was still reading the hover background image and not retaining the proper styling.

I then tried adding checked="checked" back to the HTML and it got screwed up again.