Как предотвратить множественный выбор в jQuery UI Выбираемый плагин

Ответ 1

Нет определенного пути. Однако вы можете передать функцию обратного вызова для событий "Пуск" или "Выбранные", что отменяет выбор, если выбрано более одного элемента.

Ответ 2

Что я сделал, это то, что я допускаю множественный выбор, но когда выбор сделан, я сохраняю только первый выбранный элемент

<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');
    }
});

Я знаю, что эта тема немного старше, но я все еще наткнулся на нее, поэтому она может быть полезной для кого-то другого.

Ответ 3

Это сработало для меня. Он предотвращает "lassoing" несколько строк и Ctrl + клик.

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

Ответ 4

Это может быть лучшим решением:

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

Ответ 5

да, вы можете предотвратить это поведение, просто установите для параметра toletance значение "fit"

Ответ 6

Здесь более общее решение, чем те, которые были отправлены ранее:

    $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 + клик.)

Ответ 7

Интересное обсуждение этого вопроса вы можете найти на этот поток форума jQuery.

Ответ 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
    }
});

Ответ 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

Ответ 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
                        }
                    }
                }
            }

Он по существу проверяет, находятся ли все элементы рядом друг с другом.