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