jQuery UI的複選框沒有顯示

Question

我：

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

，並在我的JavaScript，我有：

$('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); 

問：爲什麼我沒有看到一個jQuery UI風格的複選框？是否因爲在jQuery加載之後但在jQuery UI加載之前調用myLoadCallback？

在Firebug中，我看到輸入的類已添加到ui-helper-hidden-accessible中。

Answer 1

我能夠像這樣工作。

See Fiddle here

您label應該引用一個ID的for元素。

我將input更改爲包含id="check"，並將label從for="ShowDeleted"更改爲for="check"。

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

到

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

然後，我只是叫下面的JavaScript來創建jQuery的複選框按鈕。

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

如果這些變化不會爲你工作，ID建議確保您在了jQuery和jQuery UI的JS和CSS文件正確拉動。

Answer 2

這是因爲<label>元素的for屬性必須引用複選框的id屬性，而不是其name。

添加一個id屬性複選框解決您的問題：

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