jquery - 使用 jQuery 可选定义专属选择元素

Question

我有两个 ol 元素，里面有 li ，我想ol#gardien只允许在一个元素和ol#milieu几个元素中进行选择。我怎么能用 jQuery 做到这一点？

HTML：

<ol id="gardien" class="selectable ui-selectable">
<li class="ui-widget-content">Olivier</li>
<li class="ui-widget-content">Arnaud</li>
<li class="ui-widget-content">Rémy</li>
<li class="ui-widget-content">Willy</li>
</ol>

<ol id="milieu" class="selectable ui-selectable">
<li class="ui-widget-content">Alain</li>
<li class="ui-widget-content">Loic</li>
<li class="ui-widget-content">Benoît</li>
</ol>

Answer 1

我所做的是将我想要进行多项选择的人和只有一项选择的人分开。

多项选择：

$("#milieu").bind("mousedown", function(e) {e.metaKey = true;}).selectable();

只能选择一种（jquery 中的默认行为）

$("#gardien" ).selectable();

Answer 2

您可以尝试使用selected事件，在这种情况下，您可以删除所选元素并选择新元素。

代码：

$(document).ready(function () {
    $("#milieu").selectable();

    $("#gardien").selectable({
        selected: function (event, ui) {
            $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
        }
    });
});

演示：http: //jsfiddle.net/RwYxb/