jQuery UI Selectable – 单击时取消选择所选项目

有没有人知道是否有办法配置一个jquery ui可选元素来单击它时取消选中所选元素？ 有点像切换。 如果已选中，则取消选中，否则执行默认操作。

谢谢。

Answer 1

我回答你的问题已经很晚了，但是我还是要回答它，以便将其作为其他人的参考。

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

这将允许您正在寻找的切换行为。

Answer 2

那么这就是我刚才做的事情。 我使用类名来切换选择和取消选择。 我很想知道是否还有其他选择：

 $("#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'); } }); 

Answer 3

如果您希望保留现有选择但仍具有切换操作，则只需忽略给定解决方案的未选择事件。 您还需要删除ui选择的类。

 $("#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 } } }); 

Answer 4

你是这个意思吗？

在选择操作结束时，在从选择中移除的每个元素上触发此事件。

代码示例

提供回调函数以将未选择的事件作为init选项处理。

 $( ".selector" ).selectable({ unselected: function(event, ui) { ... } }); Bind to the unselected event by type: selectableunselected. $( ".selector" ).bind( "selectableunselected", function(event, ui) { ... }); 

资源：

http://jqueryui.com/demos/selectable/#event-unselected