关于jquery ui：JQueryUI复选框不可单击？

JQueryUI Checkboxes not clickable?

我是JQuery和JQueryUI的新手，并且在项目中遇到了.button()和.buttonset()的问题。

当我遵循JQueryUI页面上的示例时，一切正常。但是，我的页面正在创建按钮功能，创建按钮后，按钮文本会显示出来，但按钮不可单击。

以下是源链接：http://mdihosting.com/5/Projects/form/test1.html

在此源下面的追加-$('#epcf-wrap').buttonset();之后，不会导致可点击的按钮。

我也尝试过$('#epcf-wrap').buttonset('refresh');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript">
<script src="js/jquery.ui.selectmenu.js" type="text/javascript">
<script type="text/javascript" src="js/sliding.form.js">
<script src="js/jquery.ui.selectmenu.js" type="text/javascript">
<link rel="stylesheet" type="text/css" media="all" href="css/blitzer/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.ui.selectmenu.css" />
<script type="text/javascript">
$(document).ready(function(){
$('input:checkbox').button();
$.ajax({
type:"GET",
url:"xml/categories.xml",
dataType:"xml",
success: function(xml) {
var select = $('#vendorcat');
$(xml).find('Cat').each(function(){
var title = $(this).attr('name');
select.append("<option class='vendorcat' value='"+title+"'>"+title+"</option>");
$('#vendorcat').selectmenu();
});
}
});

$("#about").dialog({
resizable: true,
autoOpen:false,
modal: true,
width:400,
height:400,
buttons: {
'Continue': function() {
$(this).dialog('close');
alert('You clicked continue');
}, // end continue button
Cancel: function() {
$(this).dialog('close');
} //end cancel button
}//end buttons

});//end dialog
$('#results').hide();
$('#btnOpen').click(function(){
$('#about').dialog('open');
}); //end click handler

});

<script type="text/javascript"> //onchange1 - Build Category Dropdown
//Going for the single function length world record
//Open categories.xml and find the node based upon the passed variable catname - Category Name
//If the Category Name is equal to the argument passed build the variables, build the array, and output
function onchange1(catname){
$.ajax({
type:"GET",
url:"xml/categories.xml",
dataType:"xml",
success: function(xml) {
var table = $('<table>', {id:'opttable', align:'left'});
tr = $('<tr>').appendTo(table); // create TR and append to TABLE
td = $('<td>').appendTo(tr); // create TD and append to TR
// iterate all children of the current Category
$(xml).find('Cat[name="' + catname + '"]').children().each(function() {
d = $(this)
if (d.text() === 'TRUE') {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name'),
checked: 'checked'
}).appendTo(td);
}
else {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name')
}).appendTo(td);
}
// create LABEL with the id attribute of the current
// child of Cat and append to TD
$('<label>' + d.attr('name') + '</label>', { for:d.attr('id').toLowerCase() })
.appendTo(td);
$('<br />').appendTo(td); // create BR element and append to TD
});
$('#epcf-wrap').empty().append(table); // Append the table to its container
$('#epcf-wrap').buttonset();//This doesn't work
}
});
}

<script type="text/javascript"> //Form Submitted
function formsubmitted(){
var resultsArr = []
resultsArr +="<table><tr><td>";
resultsArr +="Name:" + $("input[name='name']").val();
resultsArr +="</td></tr><tr><td>";
resultsArr +="Email:" + $("input[name='email']").val();
resultsArr +="</td></tr></table>"

$('#results').empty().append(resultsArr).show();
$('#content').hide();
}

</head>
<style>
span.reference{
position:fixed;
right:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;

}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>

<span class="reference">

Version popup could go here
<input type="button" id="btnOpen" value="Open">
</span>

VRACC

<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Vendor Details</legend>
<p>
<label for="vendorcat">Vendor Category</label>
<select id="vendorcat" name="vendorcat" onChange="onchange1((this).options[this.selectedIndex].value);">
</select>
<legend>Enterprise Processes</legend>

<input type="checkbox" id="check1" /><label for="check1">Some Checkbox</label>

</fieldset>

</form>

<ul>

<li>

Vendor Details

</li>

</ul>

</body>

您需要将for属性添加到与input的id相对应的label标记。无论出于何种原因，他们以您的方式添加for属性似乎均不起作用。并且，删除toLowerCase()。除非大小写匹配，否则它将无法正常工作。

也许您只需要在for之后加一个空格：

1	$('<label>' + d.attr('name') + '</label>', { for: d.attr('id') })

但是，如果仍然无法正常运行，请尝试：

1	$('<label for="' + d.attr('id') + '">' + d.attr('name') + '</label>'

http://jsfiddle.net/CL9Tt/