jQueryのUIチェックボックス

Question

を示していない私が持っている

$('input[type=checkbox]').button(); 

私はjQueryので呼び出すことを呼び出す方法：

<script src="http://www.google.com/jsapi"></script> 
<script src="myGoodness.js"></script> 

そして、Javascriptは：

google.load("jquery", "1"); 
google.load("jqueryui", "1"); 
var myLoadCallback = function() { 
    $('input[type=checkbox]').button(); 
}; 
google.setOnLoadCallback(myLoadCallback); 

です。

Q：jQuery UIスタイルのチェックボックスが表示されないのはなぜですか？それは、jQueryがロードされた後、jQuery UIがロードされる前にmyLoadCallbackが呼び出されているためですか？

Firebugでは、入力にはui-helper-hidden-accessibleクラスが追加されていることがわかりました。

Answer 1

このように動作させることができました。あなたのlabelの

See Fiddle here

for要素がIDを参照する必要があります。

私はid="check"を含めるようにinputを変更し、for="check"にfor="ShowDeleted"からあなたlabelを変更しました。

<input id="check" name="ShowDeleted" type="checkbox" /> 
<label for="check">Show Deleted</label> 

へ

<input name="ShowDeleted" type="checkbox" /> 
<label for="ShowDeleted">Show Deleted</label> 

そして私はちょうどjqueryのチェックボックスボタンを作成するには、次のJavascriptを呼ばれます。

$('#check').button(); 

これらの変更は、あなたのために動作しない場合は、idはあなたが適切にjQueryとjQueryのUI-JSとCSSファイルに引いていることを確認することをお勧めします。

Answer 2

<label>要素のfor属性は、nameではなく、チェックボックスのid属性を参照する必要があるためです。

<input id="ShowDeleted" name="ShowDeleted" type="checkbox" /> 
<label for="ShowDeleted">Show Deleted</label> 

：チェックボックスに id属性を追加する

はあなたの問題を修正します