jQuery impedisce il cambiamento per selezionare

Voglio impedire che una casella di selezione venga modificata se si applica una determinata condizione. Fare questo non sembra funzionare:

$('#my_select').bind('change', function(ev) { if(my_condition) { ev.preventDefault(); return false; } }); 

Sto indovinando questo perché a questo punto l’opzione selezionata è già cambiata.

Quali sono altri modi per farlo?

Prova questo:

http://jsfiddle.net/qk2Pc/

 var my_condition = true; var lastSel = $("#my_select option:selected"); $("#my_select").change(function(){ if(my_condition) { lastSel.prop("selected", true); } }); $("#my_select").click(function(){ lastSel = $("#my_select option:selected"); }); 

Nel caso in cui qualcuno abbia bisogno di una versione generica della risposta di mattsven (come ho fatto io), eccola:

 $('select').each(function() { $(this).data('lastSelected', $(this).find('option:selected')); }); $('select').change(function() { if(my_condition) { $(this).data('lastSelected').attr('selected', true); } }); $('select').click(function() { $(this).data('lastSelected', $(this).find('option:selected')); }); 

Se si desidera semplicemente impedire l’interazione con la selezione completa quando my_condition è true, è sempre ansible catturare l’evento Mousedown e fare in modo che il proprio evento impedisca lì:

 var my_condition = true; $("#my_select").mousedown(function(e){ if(my_condition) { e.preventDefault(); alert("Because my_condition is true, you cannot make this change."); } }); 

Ciò impedirà qualsiasi evento di cambiamento che si verifichi mai mentre my_condition è vero.

Un’altra opzione da considerare è distriggersrla quando non si desidera che possa essere modificata e abilitandola:

 //When select should be disabled: { $('#my_select').attr('disabled', 'disabled'); } //When select should not be disabled { $('#my_select').removeAttr('disabled'); } 

Aggiorna dal tuo commento (se ho capito la funzionalità che desideri):

 $("#dropdown").change(function() { var answer = confirm("Are you sure you want to change your selection?") { if(answer) { //Update dropdown (Perform update logic) } else { //Allow Change (Do nothing - allow change) } } }); 

dimostrazione

Potrebbe essere necessario utilizzare l’opzione “.live” in jQuery poiché il comportamento verrà valutato in tempo reale in base alla condizione che hai impostato.

 $('#my_select').live('change', function(ev) { if(my_condition) { ev.preventDefault(); return false; } }); 

Nessuna delle risposte ha funzionato bene per me. La soluzione facile nel mio caso era:

 $("#selectToNotAllow").focus(function(e) { $("#someOtherTextfield").focus(); }); 

Ciò consente di fare clic o selezionare il menu a discesa della selezione e sposta semplicemente lo stato attivo su un campo diverso (un input di testo nelle vicinanze impostato su readonly) quando si tenta di mettere a fuoco sulla selezione. Può sembrare un inganno sciocco, ma molto efficace.

Puoi farlo senza jquery …

  

oppure puoi fare una funzione per verificare le tue condizioni

   

Implementa in modo personalizzato readonly come eventHandler

   

Demo: https://jsfiddle.net/0mvajuay/8/

Questa è stata l’unica cosa che ha funzionato per me (su Chrome versione 54.0.2840.27):

 $('select').each(function() { $(this).data('lastSelectedIndex', this.selectedIndex); }); $('select').click(function() { $(this).data('lastSelectedIndex', this.selectedIndex); }); $('select[class*="select-with-confirm"]').change(function() { if (!confirm("Do you really want to change?")) { this.selectedIndex = $(this).data('lastSelectedIndex'); } }); 
    

Questo ha funzionato per me, non è necessario mantenere un lastSelected se si conosce l’ optionIndex da selezionare.

 var optionIndex = ... $(this)[0].options[optionIndex].selected = true; 
 $('#my_select').change(function(ev) { if(my_condition) { ev.preventDefault(); return false; } }); 

dare un’occhiata a .change e anche io penso quando si utilizza ev.preventDefault(); non è necessario return false;