I'm currently using JQuery Nestable plug-in in my application to create nested list. Each item on the list contains a checkbox.
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>the list is generated properly, however, the checkboxes are not clickable.
Can someone tell me what I'm doing wrong?
HTML SOURCE:
<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>
Thanks for the help.
Thanks to Stephen, I changed this:
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');
});
Works fine now.