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

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

是的,你可以阻止这种行为,只需将toletance选项设置为'fit'