IE: il pulsante radio nascosto non viene controllato quando si fa clic sull’etichetta corrispondente

Ho appena notato uno strano comportamento in IE7.

Ho pulsanti di opzione con le etichette associate come segue:

    

Il pulsante radio è nascosto tramite css con display: nessuno o visibilità: nascosto (non chiedere)

Il problema è che quando faccio clic sull’etichetta in IE7 (non ho ancora visto altre versioni di IE) il pulsante di opzione associato non viene effettivamente verificato. L’ho confermato con jquery: l’evento click label è stato triggersto, ma l’evento click sul pulsante radio non lo è. Un post del modulo conferma anche che il pulsante di opzione selezionato non cambia.

Funziona correttamente in firefox e funziona anche correttamente se rimuovo il CSS che nasconde i pulsanti di opzione.

È un bug di IE o mi sto perdendo qualcosa?

Probabilmente ha a che fare con il display: none – potresti anche scoprire che gli elementi nascosti non ricevono i loro valori inviati con il resto del modulo. Se hai il controllo su di esso, puoi provare a posizionare gli elementi fuori dallo schermo piuttosto che nasconderlo .

Questa è una risposta wiki per riunire tutte le diverse risposte e opzioni.

Opzione 1: sposta l’elemento fuori dallo schermo anziché nasconderlo completamente

 position: absolute; top: -50px; left: -50px; 

Opzione 2: utilizza un po ‘di JavaScript per impostare il pulsante di opzione da verificare quando si fa clic sull’etichetta

 $("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); }); 

Opzione 3: imposta la larghezza e / o l’opacità dell’elemento a zero

 width: 0; /* and/or */ -moz-opacity:0; filter:alpha(opacity:0); opacity:0; outline:none; /* this prevents IE8 from having the line around it even though it's invisible */ 

Opzione 4: usa un altro browser 🙂

Fondamentalmente, le specifiche per queste cose non specificano in modo specifico quale comportamento usare, ma IE generalmente prende la posizione che se non può essere visto, allora non funziona. “Visto” e “lavoro” possono significare cose diverse, ma in questo caso significa che quando display:none è impostato, l’etichetta non triggers il pulsante di opzione, il che porta ai soliti soluzioni alternative necessarie per così tante cose in IE.

Questo funziona per me

 width: 0px; 

Testato in IE7 e IE8. Pure CSS non javascript.

Questo problema esiste in IE6, 7, 8 e anche l’attuale 9 beta. Come soluzione, posizionare il pulsante radio fuori dallo schermo è una buona idea.

Ecco un’alternativa che non deve coinvolgere il designer o il css: Nascondi il pulsante normalmente, e fa in modo che qualsiasi funzione gestisca l’evento click per il pulsante gestisca anche l’evento click per l’etichetta.

 $("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); }); 

Grazie Lane per questo. Lo aggiungo qui come risposta, quindi le persone non trascurano il tuo commento.

Sostituire

 style="display:none;" 

con

 style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;" 

Puoi provare questo per IE7,8:

 input{ position: absolute; z-index: -1; } 

invece di

 input{ display: none; } 

C’è una bella raccolta di tue proposizioni:

 input { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; } 

invece di:

 display: none; 

Stavo usando la funzione jQuery hide() , quindi non è stato facile cambiare il modo in cui un elemento è nascosto senza scrivere un codice più complesso. Ho trovato questa idea: utilizzo la class per memorizzare l’attributo verificato e reimpostare nuovamente questo attributo appena prima dell’invio.

 if ($.browser.msie && $.browser.version == 7.0) { $('input[type=radio]').click(function() { $('input[name="'+$(this).attr("name")+'"]').each(function(){ if ($(this).attr("checked")){ $(this).addClass("checked"); }else{ $(this).removeClass("checked"); } }); }); $('form').submit(function(){ $('input.checked').each(function(){ $(this).attr("checked","true"); }); }); } 

Nel mio caso funziona come un incantesimo.