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?

Eakins

Do you want to deselect a previously-selected item? Or prevent the selection of a second item? – Devilment

what i pretend is to get only one item selected like a "dropdown behavior" or a radiobutton. – Eakins

Answer 1

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

Araiza

selected should be ui-selected – Peters

Also, this doesn't handle the mouse select case. – Peters

Answer 2

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.

Peters

+1 This works great. (In my particular case the items do not have descendants.) – Stannic

To disable multiple items getting caught in the lasso: $("#selectable").selectable({ selected: function(event, ui) { $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected"); }, selecting: function(event, ui) { $(ui.selecting).addClass("ui-selecting").siblings().removeClass("ui-selecting"); }, }); – Finedraw

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

Stirring

thats better... improved answered – Hirundine