如何在jQuery UI Selectable插件中防止多重选择
我正在使用jQuery UI Selectable插件。 我想一次选择一个项目。 但是jQuery UI Selectable插件允许通过单击/拖动/按住CTRL键进行多项选择。 有没有办法阻止多重选择？
没有明确的方法。 但是，您可以传入“Start”或“Selected”事件的回调函数，如果选择了多个元素，则会取消选择。
我所做的是，我允许多次选择但是当选择完成时，我只保留第一个元素
- Row 1
- Row 2
- Row 3
这将选择除第一个元素之外的所有选定元素并删除所选状态。 所以最后，只会选择一个元素。 event.target对应我的ul元素。
$('#select').selectable({ stop:function(event, ui){ $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected'); } });
我知道这个话题有点陈旧，但我仍然偶然发现它，所以它对其他人有用
这对我有用。 它可以防止“套索”多行并按住ctrl +单击。
$(function() { $("#selectable").selectable({ selecting: function(event, ui){ if( $(".ui-selected, .ui-selecting").length > 1){ $(ui.selecting).removeClass("ui-selecting"); } } }); });
这可能是一个更好的解决方案：
$('#selectable').selectable({ selecting: function (event, ui) { $(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting'); } });
这是一个比以前发布的更通用的解决方案：
$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 +点击时，抓住“第一”选择者会导致一些奇怪的行为。）
是的，你可以阻止这种行为，只需将toletance选项设置为’fit’
关于这个有趣的讨论，你可以在这个jQuery论坛post上找到。
您可以像这样创建自定义插件：
$.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 } });
这里有一些很好的解决方案，但是大多数假设您总是希望选择第一个元素，因为它在多选案例中出现在DOM中。
为了解决这个问题，我保留了一个变量（ lastSelection ），它包含成功请求的最后一个元素（而不是DOM中的第一个元素），以便在不需要的选择的情况lastSelection退。
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 +单击的情况下取消选择，则必须使用此方法实现解决方法。
我还想指出tolerance: 'fit'只需要套索完全包围目标元素以便选择它，它不会禁用套索选择，除非你的元素不能被可用的套索区域包围。 http://api.jqueryui.com/selectable/#option-tolerance
如果要禁用非连续多重选择但仍希望保留拖动选择，则可以执行此操作。
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 } } } }
它基本上检查所有元素是否彼此相邻。