Come impedire la selezione multipla nell'interfaccia utente jQuery Plugin selezionabile

Question

Sto usando l'interfaccia utente jQuery Plugin selezionabile. Voglio selezionare un articolo alla volta. Ma l'interfaccia utente selezionabile di jQuery consente la selezione multipla facendo clic/trascinando/tenendo premuto il tasto CTRL. C'è un modo per impedire la selezione multipla?

Answer 1

Non esiste un modo definito. Tuttavia, è possibile passare una funzione di callback per eventi "Start" o "Selected", che annulla la selezione se è selezionato più di un elemento.

Answer 2

Una interessante discussione su questo argomento è disponibile su this jQuery forum thread.

Answer 3

Sì, è possibile impedire questo comportamento, è sufficiente impostare l'opzione toletance per 'fit'

Answer 4

È possibile creare il plugin personalizzato come questo:

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

quello che ho fatto, è che mi permetto multipla selezione, ma quando la selezione viene effettuata, mantengo solo il primo elemento selezionato

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

Questo seleziona tutti gli elementi selezionati eccetto il primo ed elimina lo stato selezionato. Alla fine, verrà selezionato solo un elemento. event.target corrisponde al mio ul elemento.

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

So che questo tema è un pò vecchio, ma ho ancora imbattuto su di esso, in modo che possa essere utile a qualcun altro

Answer 6

Questa potrebbe essere una soluzione migliore:

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

Answer 7

Ecco un soluzione più generale di quelli precedentemente pubblicati:

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

(I selectees potrebbero non essere sempre figli del selezionabile, e tenendo premuto il "primo" selecte provoca un comportamento strano quando si ctrl + clic.)

Answer 8

Questo ha funzionato per me. Impedisce il "lassoing" di più righe e ctrl + clic.

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

Answer 9

Ci sono alcune buone soluzioni qui, ma la maggior parte di esse presuppone che si desidera sempre selezionare il primo elemento come appare nel DOM in un caso di selezione multipla.

Per ovviare a ciò, tengo una variabile (lastSelection) che contiene l'ultimo elemento che è stato richiesto correttamente (anziché il primo nel DOM) a cui fare il fallback nel caso di una selezione indesiderata.

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: Se si desidera deselezionare senza Ctrl/Cmd + clic si dovrà implementare un work-around con questo metodo.

Desidero anche precisare che tolerance: 'fit' richiede semplicemente che il laccio circonda completamente un elemento di destinazione per selezionarlo, non disabiliterà la selezione del laccio a meno che gli elementi non possano essere circondati nell'area del lazo disponibile. http://api.jqueryui.com/selectable/#option-tolerance

Answer 10

Se si desidera disabilitare la selezione multipla non consecutiva ma si desidera comunque mantenere la selezione di trascinamento, è possibile farlo.

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

Controlla essenzialmente se tutti gli elementi sono uno accanto all'altro.