jQuery UI Selectable - unselect selected item on click

i'm very late in responding to your question, but let me just answer it anyway so that to keep it as a reference for others.

$( ".selector" ).bind( "mousedown", function ( e ) {    e.metaKey = true;} ).selectable();

this will allow the toggle behavior that you're looking for.

Well here's what I just ended up doing. I used a class name to toggle selecting and unselecting. I'd love to hear if there is another option:

$("#selectable").selectable({    selected: function (event, ui) {        if ($(ui.selected).hasClass('selectedfilter')) {            $(ui.selected).removeClass('selectedfilter');            // do unselected stuff        } else {                        $(ui.selected).addClass('selectedfilter');            // do selected stuff        }    },    unselected: function (event, ui) {        $(ui.unselected).removeClass('selectedfilter');    }});

If you want that existing selections be preserved and yet have the toggle operation, you simply need to ignore the unselected event for the solution given. Also you need to remove the ui-selected class.

$("#selectable").selectable({selected: function (event, ui) {    if ($(ui.selected).hasClass('selectedfilter')) {        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');        // do unselected stuff    } else {                    $(ui.selected).addClass('selectedfilter').addClass('ui-selected');        // do selected stuff    }}});