jQuery UI seleccionable: anule la selección del elemento al hacer clic

Question

¿Alguien sabe si hay una forma de configurar un elemento seleccionable de jquery ui para deseleccionar el elemento seleccionado al hacer clic en él? Más o menos como un interruptor. Si ya está seleccionado, anule la selección, de lo contrario, realice el comportamiento predeterminado.

Gracias.

Answer 1

llego muy tarde respondiendo a su pregunta, pero permítanme que la responda de todos modos para que siga siendo una referencia para los demás.

$(".selector").bind("mousedown", function (e) { 
    e.metaKey = true; 
}).selectable(); 

esto permitirá el comportamiento de alternar que usted está buscando.

Answer 2

¿Es esto lo que quieres decir?

Este evento se desencadena al final de la operación de selección, en cada elemento eliminado de la selección.

Ejemplos de código

de Suministro una función de devolución de llamada controlen el evento no seleccionado como una opción de inicio.

$(".selector").selectable({ 
    unselected: function(event, ui) { ... } 
}); 
Bind to the unselected event by type: selectableunselected. 
$(".selector").bind("selectableunselected", function(event, ui) { 
    ... 
}); 

Fuente:

http://jqueryui.com/demos/selectable/#event-unselected

Answer 3

Bueno esto es lo que acaba de terminar haciendo. Usé un nombre de clase para alternar seleccionando y deseleccionando. Me gustaría saber si hay otra opción:

$("#selectable").selectable({ 
    selected: function (event, ui) { 
     if ($(ui.selected).hasClass('selectedfilter')) { 
      $(ui.selected).removeClass('selectedfilter'); 
      // do unselected stuff 
     } else {    
      $(ui.selected).addClass('selectedfilter'); 
      // do selected stuff 
     } 
    }, 
    unselected: function (event, ui) { 
     $(ui.unselected).removeClass('selectedfilter'); 
    } 
}); 

Answer 4

Si desea que las selecciones existentes ser preservado y sin embargo tener la operación de conmutación, sólo hay que pasar por alto el evento no seleccionado para la solución dada. También necesita eliminar la clase seleccionada por la ui.

$("#selectable").selectable({ 
selected: function (event, ui) { 
    if ($(ui.selected).hasClass('selectedfilter')) { 
     $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected'); 
     // do unselected stuff 
    } else {    
     $(ui.selected).addClass('selectedfilter').addClass('ui-selected'); 
     // do selected stuff 
    } 
} 
});