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:
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
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;