Jquery UI SELECTABLE, how to select one item only?

Question

is there any way to define that, only one item can be selected with jquery.selectable widget?

Or i've to inmplement a workarround capturing events and manipulating by my self what happens?

Answer 1

I expanded on Nirmal's answer to limit the mouse select case. Also, I feel that it is cleaner to use the selected option rather than a completely separate event handler.

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

There is one minor problem remaining. When selecting multiple items with the mouse the last item will always be selected. This is because the function passed into the selected option is run for each selected item, which I assume goes in item order. Ideally the item that your mouse cursor lands at would be selected. I didn't fix this because I mainly just wanted a multiple selection constraint when using the mouse.

Answer 2

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

Answer 3

I improve mattblang's answer a little. Siblings can have also descendants, so more general answer is:

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