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

for上的label元素应该引用ID。

我将您的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();

如果这些更改不适合您，则建议您确保正确地提取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>

jQuery UI Checkbox没有显示

2 个答案: