Programmatically 'unselect' a jQuery UI selectable widget

Is there a way to programmatically 'unselect' any and all selected elements for a given $("#selectable").selectable开发者_开发技巧() widget?

The following command works at http://jqueryui.com/demos/selectable/

$('#selectable .ui-selected').removeClass('ui-selected')

Since a class's existence defines if an item is selected, simply removing the item will deselect it.

Note, you can also take advantage of toggleClass and addClass functions.

EDIT:

Try this too: $('#selectable').trigger('unselected'). That might also trigger all the css changes as well, and this way the unselected event also gets triggered for whatever else may be hooked to it.

The accepted answer only unselects visually. It doesn't trigger the unselected callback.

This can be used instead:

$(".ui-selected").each(function(i,e){
  $(".selector").selectable("triggerunselect",e);
});

You could destroy and reinit the current "selectable" instance.

For instance like this:

$("#selectable-area").selectable("destroy");

then

$("#selectable-area").selectable();