Question

是否有人知道是否有办法配置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

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

4 个答案: