ウィジェット内でjquery-uiチェックボックスを使用するにはどうすればよいですか？

Question

クラスui-widget-contentを持つコンテナ内でjquery-uiチェックボックスを使用しています。これは、バックグラウンドプロパティを定義する ".ui-widget-content .ui-state-hover" CSSルールが、チェックボックスイメージの正しい背景位置を定義する.ui-icon-checkルールを上書きする原因となります。私はこれがより具体的であると信じています。

結果、ウィジェット内のチェックボックスが間違ったイメージを表示します。私はこれをどのように扱うべきですか？

Here is a jsfiddle example。私がui-widget-contentクラスを持っている2番目の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"); 

希望に役立ちます。

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

私がチェックした属性を削除し、jQueryの経由で設定すると、そのように：何か面白いもの、ハックのまだ少しを見つけたが、助けているようだ

更新

：

私はCSSハックを削除できました。私は、CSSの位置を戻すように設定していることが判明しました。それでも、ホバーの背景イメージを読み込んでいて、適切なスタイリングを保持していませんでした。

その後、checked="checked"をHTMLに追加しようとしましたが、もう一度やり直してしまいました。