How to prevent multiple selection in jQuery UI Selectable plugin How to prevent multiple selection in jQuery UI Selectable plugin jquery jquery

How to prevent multiple selection in jQuery UI Selectable plugin


What i did, is that i allow multiple selection but when the selection is done, i only keep the first element selected

<ul id="select">    <li>Row 1</li>    <li>Row 2</li>    <li>Row 3</li></ul>

This selects all the selected elements except the first one and deletes the selected status. So at the end, only one element will be selected. event.target corresponds to my ul element.

$('#select').selectable({    stop:function(event, ui){        $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');    }});

I know this topic is kinda old, but i still stumbled upon it, so it can be useful to someone else


This worked for me. It prevents "lassoing" multiple rows and ctrl + click.

$(function() {$("#selectable").selectable({      selecting: function(event, ui){            if( $(".ui-selected, .ui-selecting").length > 1){                  $(ui.selecting).removeClass("ui-selecting");            }      }});});


There is no defined way. However, you could pass in a callback function for "Start" or "Selected" events, that cancels the selection if more than one element is selected.