我目前在我的应用程序中使用JQuery Nestable插件来创建嵌套列表。列表中的每个项目都包含一个复选框。
jQuery(function($) {
$('.dd').nestable({
collapsedClass: 'dd-collapsed'
}).nestable('collapseAll');
//$('.dd-handle a').on('mousedown', function (e) {
// e.stopPropagation();
//});
$(".dd-nodrag").on("mousedown", function(event) {
event.preventDefault();
return false;
});
$(".dd-nodrag").on("click", function(event) {
event.preventDefault();
return false;
});
});<div class="dd shadowed">
<ol class="dd-list">
@foreach (var item in Model.ModulesList) {
<li class="dd-item bordered-inverse">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input name="selectedModules" class="colored-blue" id="selectedModules" type="checkbox" value="@item.Id" checked="@item.Selected" disabled="@item.Disabled">
<span class="text">@item.Name</span>
</label>
</div>
</div>
@if (@item.items.Count > 0) {
<ol class="dd-list">
@foreach (var sub in @item.items) {
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input name="selectedsubModules" class="colored-blue" id="selectedsubModules" type="checkbox" value="@sub.Id" checked="@sub.Selected">
<span class="text">@sub.Name</span>
</label>
</div>
</div>
</li>
}
</ol>
}
</li>
}
</ol>
</div>
列表生成正确，但复选框不可点击。
有人能告诉我我做错了吗？
HTML来源：
<div class="dd shadowed">
<ol class="dd-list">
<li class="dd-item bordered-inverse">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="1" checked="checked" disabled="disabled">
<span class="text">Home</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-inverse">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="2">
<span class="text">Pipeline</span>
</label>
</div>
</div>
<ol class="dd-list">
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="1">
<span class="text">Deal</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="2">
<span class="text">Setting</span>
</label>
</div>
</div>
</li>
</ol>
</li>
<li class="dd-item bordered-inverse">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="3" checked="checked" disabled="disabled">
<span class="text">Profile</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-inverse">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="4" checked="checked">
<span class="text">Admin</span>
</label>
</div>
</div>
<ol class="dd-list">
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="3" checked="checked">
<span class="text">User</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="4" checked="checked">
<span class="text">Role</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="5" checked="checked">
<span class="text">Group</span>
</label>
</div>
</div>
</li>
<li class="dd-item bordered-blue">
<div class="dd-handle dd-nodrag">
<div class="checkbox">
<label>
<input class="colored-blue" type="checkbox" value="6" checked="checked">
<span class="text">Module</span>
</label>
</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
感谢您的帮助。
答案 0 :(得分：0)
感谢Stephen， 我改变了这个：
jQuery(function ($) {
$('.dd').nestable({
collapsedClass: 'dd-collapsed'
}).nestable('collapseAll');
$('.dd-handle a').on('mousedown', function (e) {
e.stopPropagation();
});
$(".dd-nodrag").on("mousedown", function (event) {
event.preventDefault();
return false;
});
$(".dd-nodrag").on("click", function (event) {
event.preventDefault();
return false;
});
});
TO：
jQuery(function ($) {
$('.dd').nestable({
collapsedClass: 'dd-collapsed'
}).nestable('collapseAll');
});
现在工作正常。