动态启用/禁用 jquery 可排序项目

我的表格行可以根据是否选中某些单选按钮进行排序。可排序对象初始化于document.ready如下：

$(document).ready(function() {
    // Return a helper with preserved width of cells
    // handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    };
    // #opts = table id; tr.ui-state-disabled class = rows not sortable
    $("#opts tbody").sortable({
        items: 'tr:not(.ui-state-disabled)',
        cursor: 'crosshair',
        helper: fixHelper
    }).disableSelection();
});

我将以下功能附加到单选按钮（ids 前缀为“active_”）onchange添加或删除ui-state-disabled表行中的类属性（动态 ID 前缀为“opt_”）：

    var toggleDrag = function(i){
    if ($('#active_'+i+'-0').is(':checked')) {
        $('#opt_'+i).addClass('ui-state-disabled');
    }
    if ($('#active_'+i+'-1').is(':checked')) {
        $('#opt_'+i).removeClass();
    }
    $("#opts tbody").sortable("option", "items", "tr:not(.ui-state-disabled)");
    //$("#opts tbody").sortable("refresh");
    //alert($('#opt_'+i).attr('class')); - alert indicates that the class attribute is being changed
    //$("#opts tbody").sortable("option", "cursor", "auto"); - this works!
}

如果我选择一个单选按钮，该按钮应该使以前不可排序的行可排序，它就会起作用，并且我可以拖放该行。问题是，如果我选择一个单选按钮来创建以前可排序、不可排序的行，我仍然可以拖放它。二传手.sortable("option", "items", "tr:not..etc")如果先前可排序，则不会出现“取消注册”行。我也尝试过 .sortable("refresh") 但没有运气。我已经检查过类属性是否正在通过警报进行更改，确实如此。

任何对此的帮助将不胜感激。

我遇到了同样的问题，即items选项似乎没有删除之前启用的项目。

The cancel然而，选项确实如此。请注意，禁用的项目将四处移动，为可排序的项目腾出空间（该位置仍可用作放置目标），但拖动禁用的项目本身将不起作用。用一个disabled类还可以根据项目是否可排序轻松更改样式（请参阅jsfiddle http://jsfiddle.net/Sxg8D/122/).

这里的代码部分基于 Bah Bah the Lamb 的答案，但已被大大整理和简化。

html：

<ul id="sorted-list">
   <li>
       <p><input type="checkbox" checked="true" /> Item 1</p>
    </li>
   <li>
       <p class="disabled"><input type="checkbox" /> Item 2</p>
   </li>
   <li>
       <p><input type="checkbox" checked="true" /> Item 3</p>
   </li>
</ul>

jQuery：

$("#sorted-list").sortable({
    cancel:".disabled"
});

// add or remove the 'disabled' class based on the value of the checkbox
$("#sorted-list input").click(function() {
    if (this.checked) {
        $(this.parentElement).removeClass("disabled");
    } else { 
        $(this.parentElement).addClass("disabled");
    }
});

The CSS:

li {
  border: 1px solid #aaa;
  background-color: #eee;
  color:#555;
  padding: 5px;
}

.disabled {
  color:#ddd;
}