jquery UI сортируемый отключить, если флажок не установлен

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 - отключить все элементы li, добавив к ним классы "ui-state-default ui-state-disabled"

<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/