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

检查此FIDDLE -分组明智选择。

\n\n

超文本标记语言

\n\n

<ul id="selectable">\n    <li class="ui-widget-content" rel="group1">Item 1</li>\n    <li class="ui-widget-content" rel="group1">Item 2</li>\n    <li class="ui-widget-content" rel="group1">Item 3</li>\n    <li class="ui-widget-content" rel="group2">Item 4</li>\n    <li class="ui-widget-content" rel="group2">Item 5</li>\n    <li class="ui-widget-content" rel="group3">Item 6</li>\n    <li class="ui-widget-content" rel="group3">Item 7</li>\n</ul>\xe2\x80\x8b\n

\n\n

jQuery

\n\n

$("#selectable").selectable({\n    selected: function (event, ui) {\n        var gr1Count = 0;\n        var gr2Count = 0;\n        var gr3Count = 0;\n        $(".ui-selected").each(function () {\n            // Group 1\n            if (\'group1\' == $(this).attr(\'rel\')) {\n                gr1Count++;\n            }\n            if (gr1Count > 1) {\n                $(this).removeClass(\'ui-selected\')\n            }\n            // Group 2\n            if (\'group2\' == $(this).attr(\'rel\')) {\n                gr2Count++;\n            }\n            if (gr2Count > 1) {\n                $(this).removeClass(\'ui-selected\')\n            }\n            // Group 3\n            if (\'group3\' == $(this).attr(\'rel\')) {\n                gr3Count++;\n            }\n            if (gr3Count > 1) {\n                $(this).removeClass(\'ui-selected\')\n            }\n        });\n    }\n});\n

\n