Question

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

Answer 1

我所做的是，我允许多项选择但是当选择完成后，我只保留选择的第一个元素

<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
                        }
                    }
                }
            }

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

如何防止在jQuery UI Selectable插件中进行多项选择

10 个答案: