How to implement switch function in jQuery user interface?

Question

I am using jQuery UI - Selectable . I want to deselect an item if it has been clicked and it is already selected (toggles)

Could you help me add this feature please!

Answer 1

Due to all class callbacks, you will not do much better than this:

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

Answer 2

You already have functionality with the jQuery user interface if you hold down the Ctrl key when pressed.

If you really need this as the default functionality, you do not need to use selectable, you can do it as a simple onclick handler, for example, as suggested by nolabel.

Or ... you can edit jquery.ui.selectable.js and add an option that does exactly what you need. It should not be too complicated, there are 4 places where event.metaKey is checked , make sure your option is installed, just run the encodings, as if event.metaKey was always right.

Since selections can use one more setting, you can also request a function for jQuery user interface developers to include in the next official version.

Answer 3

You need to introduce two simple elements into the code in order to achieve what you want. This just inverts the boolean metaKey when you need inverted / switch functions.

 options: { appendTo: 'body', autoRefresh: true, distance: 0, filter: '*', tolerance: 'touch', inverted: false /* <= FIRST*/ }, _mouseStart: function(event) { var self = this; this.opos = [event.pageX, event.pageY]; if (this.options.disabled) return; var options = this.options; if (options.inverted) /* <= SECOND*/ event.metaKey = !event.metaKey; /* <= SECOND*/