JQuery UI SELECTABLE, как выбрать только один элемент?

Question

есть ли способ определить, что только один элемент может быть выбран с помощью виджета jquery.selectable?

Или я должен внедрить обходной путь захвата событий и манипулирования собой, что происходит?

Answer 1

Я расширил ответ Нирмала, чтобы ограничить выбор мышью. Кроме того, я чувствую, что лучше использовать параметр 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

Я немного улучшаю ответ Мэттбланга.У братьев и сестер также могут быть потомки, поэтому более общий ответ:

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