Jquery UI SELECTABLE，如何只选择一个项目？

Question

有没有办法定义，只能用jquery.selectable小部件选择一个项目？

或者我要实现一个捕捉事件和自我操纵的工作场所会发生什么？

Answer 1

我扩展了Nirmal的限制鼠标选择案例的答案。另外，我觉得使用selected选项比使用完全独立的事件处理程序更简洁。

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

还有一个小问题。使用鼠标选择多个项目时，将始终选择最后一个项目。这是因为传递给selected选项的函数是针对每个选定的项运行的，我假设它按项目顺序排列。理想情况下，将选择鼠标光标所在的项目。我没有解决这个问题，因为我在使用鼠标时主要想要一个多选约束。

Answer 2

$("#myList li").click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

Answer 3

我稍微改善了mattblang的答案。兄弟姐妹也可以有后代，所以更一般的答案是：

$("#selectable").selectable({
    selected: function(event, ui) {
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected").each(
            function(key,value){
                $(value).find('*').removeClass("ui-selected");
            }
        );
    }
});