如何在 jQuery UI Selectable 插件中防止多选

Question

我正在使用 jQuery UI 可选插件。我想一次选择一项。但是 jQuery UI Selectable 插件允许通过单击/拖动/按住 CTRL 键进行多项选择。 有什么办法可以防止多选？

Answer 1

What i did, is that i allow multiple selection but when the selection is done, i only keep the first element selected

<ul id="select">
    <li>Row 1</li>
    <li>Row 2</li>
    <li>Row 3</li>
</ul>

这会选择除第一个元素之外的所有选定元素并删除选定状态。所以最后只会选择一个元素。 event.target 对应我的 ul 元素。

$('#select').selectable({
    stop:function(event, ui){
        $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
    }
});

我知道这个话题有点老了，但我还是偶然发现了它，所以它可能对其他人有用

Answer 2

这对我有用。它可以防止“套索”多行和 ctrl + 单击。

$(function() {
$("#selectable").selectable({
      selecting: function(event, ui){
            if( $(".ui-selected, .ui-selecting").length > 1){
                  $(ui.selecting).removeClass("ui-selecting");
            }
      }
});
});

Answer 3

没有明确的方法。但是，您可以为“Start”或“Selected”事件传入一个回调函数，如果选择了多个元素，则取消选择。

Answer 4

这可能是一个更好的解决方案：

$('#selectable').selectable({
    selecting: function (event, ui) {
        $(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting');
    }
});

Answer 5

这里有一个比之前发布的更通用的解决方案：

    $element.selectable({
        selecting: function (e, ui) {
            // force single selection
            $(e.target).find('.ui-selectee.ui-selecting').not(ui.selecting).removeClass('ui-selecting');
            $(e.target).find('.ui-selectee.ui-selected').not(ui.selecting).removeClass('ui-selected');
        }
    });

（被选中的对象可能并不总是可选对象的子对象，当您按住 ctrl+单击时，按住“第一个”被选中对象会导致一些奇怪的行为。）

Answer 6

是的，您可以防止这种行为，只需将公差选项设置为“适合”

Answer 7

您可以在this jQuery forum thread 上找到有关此的有趣讨论。

Answer 8

您可以像这样创建自定义插件：

$.widget("xim.singleSelectable", {
    options: {
        select: null
    },
    _create: function () {
        var self = this;
        this.element.addClass('ui-selectable');
        this.element.delegate('li', 'click', function (e) {
            self.element.find('>li').removeClass('ui-selected');
            $(this).addClass('ui-selected');

            if ($.isFunction(self.options.select)) {
                self.options.select.apply(self.element, [e, this]);
            }

        });
    },
    selected: function () {
        return this.element.find('li.ui-selected');
    },
    destroy: function () {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
    }
});

Answer 9

这里有一些很好的解决方案，但大多数都假设您总是希望在多选情况下选择第一个元素，因为它出现在 DOM 中。

为了解决这个问题，我保留了一个变量 (lastSelection)，其中包含成功请求的最后一个元素（而不是 DOM 中的第一个元素），以便在出现不需要的选择时回退到。

var lastSelection;// this will record our last successful selection

$('#selectable').selectable({
    filter: '.element',
    selecting: function () {
        if ($('.ui-selecting').length > 1) {
            // if selecting multiple (lasso) we will ignore the selection and fallback
            $('.ui-selecting').removeClass('ui-selecting');
            $(lastSelection).addClass('ui-selecting');// if no value, nothing will be selected
        }     
    },
    stop: function () {
        if ($('.ui-selected').length > 1) {
            // looks like we have an invalid selection, fallback to lastSelection
            // this handles the ctrl (windows), cmd (OSX) multi-select cases
            $('.ui-selected').removeClass('ui-selected');
            $(lastSelection).addClass('ui-selected');// if no value, nothing will be selected
        } else {
            if ($('.ui-selected').first().is('.element')) {
                // if we successfully found a selection, set it as our new lastSelection value
                lastSelection = $('.ui-selected')[0];
            }     
        }     
    }
});

注意：如果您想在不使用 ctrl / cmd + click 的情况下取消选择，则必须使用此方法实施解决方法。

我还想指出，tolerance: 'fit' 只要求套索完全包围目标元素才能选择它，它不会禁用套索选择，除非您的元素不能被包围在可用的套索区域中。 http://api.jqueryui.com/selectable/#option-tolerance

Answer 10

如果您想禁用非连续多选但仍希望保留拖动选择，您可以这样做。

         stop: function( event, ui ) {
                if( $(".ui-selected, .ui-selecting").length > 1){
                    var elems = $('.ui-selected, .ui-selecting');

                    for(var i = 0; i < elems.length - 1; i++){
                        if($(elems[i]).closest('td').next('td').text() != $(elems[i+1]).text()){
                           //Non consecutive selection detected
                        }
                    }
                }
            }

它本质上检查所有元素是否彼此相邻。