Question

我有一个带有复选框的可排序列表

HTML

<ul id="dynamic-fields-table" class="sortable-list">
    <li id="a1">
        <div class="checkbox">
            <label><input type="checkbox" value="">Option 1</label>
            <span class="sort-drag-handler"><i class="fa fa-arrows-alt"></i></span>
        </div>
    </li>
    <li id="a2">
        <div class="checkbox">
            <label><input type="checkbox" value="">Option 2</label>
            <span class="sort-drag-handler"><i class="fa fa-arrows-alt"></i></span>
        </div>
    </li>
    <li id="a3">
        <div class="checkbox">
            <label><input type="checkbox" value="">Option 3</label>
            <span class="sort-drag-handler"><i class="fa fa-arrows-alt"></i></span>
        </div>
    </li>
</ul>

JS

$('.sortable-list').sortable({
    connectWith: '.sortable-list',
    placeholder: 'sortable-list-dropholder'
});

如果未选中此复选框，如何禁用拖动功能？

FIDDLE http://jsfiddle.net/johndavemanuel/rmSgx/1829/

Answer 1

1-通过向其添加“ ui-state-default ui-state-disabled”类来禁用所有li项目

<li id="a1" class="ui-state-default ui-state-disabled">

2-从可排序列表中排除禁用的项目

items: "li:not(.ui-state-disabled)"

3-添加一个处理复选框状态的功能

   $('#dynamic-fields-table li input').click( function(){
  var item=$(this);
  if(item.is(':checked')){ item.parents('li').removeClass('ui-state-disabled');
  }
  else {
   item.parents('li').addClass('ui-state-disabled');
  }


});

代码：http://jsfiddle.net/ercanpeker/Lutr8pe6/

如果未选中复选框，则jQuery UI可排序禁用

1 个答案: