JQuery Selectable - 取消当前选定的元素

Question

我有一个包含不同元素的列表。我希望所有内容都可以选择，但只能分组选择。喜欢:

<ul>
<li rel="group1">Item 1</li>
<li rel="group1">Item 2</li>
<li rel="group2">Item 3</li>
<li rel="group2">Item 4</li>
<li rel="group3">Item 5</li>
<li rel="group3">Item 6</li>
</ul>

我写了一些可以工作的东西，但是如果当前的元素 rel 属性与第一次选择的不同，我不知道如何取消当前选择。

    var selected = null;

    $( "#selectable" ).selectable({
        selecting: function(event, ui) {
            if (!selected)
                selected = $(ui.selecting).attr('rel');

            if (selected != $(ui.selecting).attr('rel')){
               // cancel this selection
            }
        }
    });

Answer 1

您可以使用filter选项仅允许选择某些列表项。

我已经准备好了这个DEMO对你来说，过滤器只有一个问题。从选择处理程序中更改启用的项目时，它不起作用。因此，我在 stop 处理程序中添加了一些修复，在其中删除了未启用的项目的选择。

您的脚本可能如下所示:

var locked = false;

function enableAll() {
    $('li').addClass('enabled');
    locked = false;
}

$("#selectable").selectable({

    // allow only enabled items to be selected
    filter: '.enabled',

    selecting: function(event, ui) {

        if (!locked) {

            var group = $(ui.selecting).attr('rel');

            // disable all items belonging to other groups
            $("#selectable li[rel!='" + group + "']").removeClass('enabled');

            locked = true;
        } 

    },

    stop: function() {

        // this fixes selectable behavior 
        // (it ignores dynamically added filter while selecting)
        $(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');

        // if no item is selected, then enable all groups
        if($(this).find('.ui-selected').length == 0) {
            enableAll();
        };
    }

});

// initialize
enableAll();​