Cómo evitar la selección múltiple en jQuery UI Complemento seleccionable

Question

Estoy usando el plugin jQuery UI seleccionable. Quiero seleccionar un elemento a la vez. Pero el complemento jQuery UI seleccionable permite la selección múltiple haciendo clic/arrastrando/sosteniendo la tecla CTRL. ¿Hay alguna manera de evitar la selección múltiple?

Answer 1

No hay una manera definida. Sin embargo, puede pasar una función de devolución de llamada para eventos "Inicio" o "Seleccionado", que cancela la selección si se selecciona más de un elemento.

Answer 2

Una discusión interesante acerca de esto se puede encontrar en this jQuery forum thread.

Answer 3

sí, se puede evitar este comportamiento, acaba de establecer la opción toletance de 'ajuste'

Answer 4

Usted puede crear su complemento personalizado como esto:

$.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 5

lo que hice, es que permiten que múltiples selección, pero cuando se realiza la selección, i solamente guardar el primer elemento seleccionado

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

Esto selecciona todos los elementos seleccionados excepto el primero y borra el estado seleccionado. Entonces, al final, solo se seleccionará un elemento. event.target corresponde a mi elemento ul.

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

Sé que este tema es un poco viejo, pero todavía topé con él, por lo que puede ser útil a alguien más

Answer 6

Esto podría ser una solución mejor:

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

Answer 7

Aquí hay una solución más general que los publicados anteriormente:

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

(Los seleccionados pueden no ser siempre hijos de seleccionable, y aferrándose al "primer" seleccionado causa un comportamiento raro cuando se presiona Ctrl + clic.)

Answer 8

Esto funcionó para mí. Evita "enlazar" múltiples filas y ctrl + clic.

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

Answer 9

Aquí hay algunas buenas soluciones, pero la mayoría supone que siempre debe seleccionar el primer elemento como aparece en el DOM en un caso de selección múltiple.

Para remediar esto, conservo una variable (lastSelection) que contiene el último elemento que se solicitó con éxito (en lugar del primero en el DOM) al cual recurrir en el caso de una selección no deseada.

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

Nota: Si desea cancelar la selección sin ctrl/cmd + clic tendrá que implementar una solución alternativa a este método.

También quería señalar que tolerance: 'fit' requiere simplemente que el lazo rodea completamente un elemento de destino con el fin de seleccionarlo, no va a desactivar la selección de lazo a menos que sus elementos no pueden estar rodeados en la zona de lazo disponible. http://api.jqueryui.com/selectable/#option-tolerance

Answer 10

Si desea deshabilitar la multiselección no consecutiva pero desea conservar la selección de arrastre, puede hacerlo.

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

Comprueba esencialmente si todos los elementos están uno al lado del otro.