JQuery Nestable with checkboxes

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?

Thanks for the help.