JQuery UI - Selectable widget - How to disable multi-selection?

Question

In jquery ui a selectable widget, I noticed that you can select multiple elements by holding down ctrl (or dragging a field), but how do you turn off multiple selection. I only want to be able to select 1 at a time.

Thanks.

Answer 1

This is a pretty crude implementation: http://jsfiddle.net/rtRjK/

Basically, when an item is selected, first deselect all of its siblings that have been selected - this handles clicks with Ctrl. Then, iterating over the brothers and sisters who select and select them - this handles the drag and drop. As a result, the drag always takes the element with the largest y-coordinate.

You can also flip your own selectable widget. I removed the link to ctrl key and _mouseDrag from $.ui.selectable : http://jsfiddle.net/zFFXc/

Answer 2

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

Answer 3

optional, with one choice, with keyboard

 //after load $(function() { // make <ol id=lista> selectable (jquery UI) $("#lista").selectable(); $("#lista").children(":first-child").addClass("selected"); //select first $(document).keydown(function(ev) { //con keyboard var actual = $(".selected"); switch (ev.keyCode) { case 13: // User pressed "enter" key actual.dblclick(); ev.preventDefault(); break; case 38: // User pressed "up" arrow actual.prev().click(); ev.preventDefault(); break; case 40: // User pressed "down" arrow actual.next().click(); ev.preventDefault(); break; } }); //end keydown //single select $("#lista li").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); }); }); // end $(fn...