动态启用/禁用jQuery可排序项目 [英] dynamically enable/disable jquery sortable item

问题描述

我有一些表格行，这些行可以根据是否选中某些单选按钮进行排序.可排序对象在document.ready上初始化，如下所示:

I have table rows that are sortable depending on whether certain radio buttons are checked or not. The sortables are initialized on document.ready as follows:

$(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 class属性(动态IDs前缀为"opt _"):

I have the following function attached to the radio buttons (ids prefixed "active_") onchange which either adds or removes the ui-state-disabled class attribute from table rows (dynamic ids prefixed "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")，但是没有运气.并且我检查了class属性是否已更改并带有警报.

If I select a radio button that should make a previously un-sortable row sortable, it works and I can drag and drop the row. The problem is if I select a radio button to make a row that previously was sortable, un-sortable, I can still drag and drop it. The setter .sortable("option", "items", "tr:not..etc") doesn't appear "un-register" a row if it was previously sortable. I also tried .sortable("refresh") with no luck. And I have checked to see if the class attribute is being changed with an alert and it is.

任何帮助，将不胜感激.

Any help with this would be greatly appreciated.

推荐答案

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

I ran into the same problem, that the items option doesn't seem to remove items which had been previously enabled.

但是，cancel选项可以.请注意，禁用项将四处移动以为可排序项腾出空间(该位置仍可作为放置目标)，但是拖动禁用项本身将不起作用.使用disabled类还可以轻松地根据项目是否可排序来更改样式(请参见 jsfiddle ).

The cancel option, however, does. Note that the disabled items will shift around to make room for the sortable ones (the spot is still available as a drop target), but dragging the disabled items themselves will not work. Using a disabled class also makes it easy to change the style based on whether or not the item is sortable (see on jsfiddle).

此处的代码部分基于羔羊巴赫·巴赫的回答，但已被大大整理和简化.

The code here is partially based on Bah Bah the Lamb's answer, but it has been greatly tidied and simplified.

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");
    }
});

CSS:

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

.disabled {
  color:#ddd;
}

这篇关于动态启用/禁用jQuery可排序项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！