Wie verwende ich das Kontrollkästchen jquery-ui im ​​Widget?

Question

Ich verwende eine jquery-ui-Checkbox innerhalb eines Containers, der die Klasse ui-widget-content hat. Dies verursacht die CSS-Regel ".ui-widget-content .ui-state-hover", die die Hintergrundeigenschaft definiert, um die .ui-icon-check-Regel zu überschreiben, die die korrekte Hintergrundposition für das Ankreuzfeldbild definiert. Ich glaube, das liegt daran, dass es spezifischer ist.

Das Ergebnis ist, dass ein Kontrollkästchen in einem Widget das falsche Bild zeigt. Wie soll ich damit umgehen?

Here is a jsfiddle example. In der zweiten Div, in der ich die UI-Widget-Content-Klasse habe, sieht man, dass das überprüfte Bild falsch ist.

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

Beachten Sie, dass ich die Eltern Div nicht ändern kann. Ich arbeite in einem Dialog, der diese Klasse erfordert.

Ich bin überrascht, dass ich niemanden finden kann, der sich darüber beschwert. Ich bin mir nicht sicher, was ich vermisse.

Answer 1

So die .ui-icon-check Klasse wird von einem späteren Stil überschrieben. Sie können es einfach zurückschreiben.

Ein Beispiel: https://jsfiddle.net/Twisty/ewabcy3g/2/ (Fixed für leere)

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

Ein weiteres Beispiel: https://jsfiddle.net/Twisty/ewabcy3g/1/

jQuery

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

Hoffe, dass hilft.

aktualisieren

gefunden etwas Interessantes, immer noch ein bisschen wie ein Hack, aber es scheint zu helfen:

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

Wenn ich das Attribut checked entfernt und es über jQuery gesetzt, wie so :

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

Ich könnte die CSS-Hacks entfernen. Ich fand, dass die CSS-Positionierung zurückgesetzt, es war immer noch das Hover-Hintergrundbild lesen und nicht das richtige Styling beibehalten.

Ich habe dann versucht, checked="checked" zurück zum HTML und es wurde wieder vermasselt.