Etichette e campi nascosti in Internet Explorer (e jquery)

Ho problemi a controllare le caselle nascoste in IE. Questo è il codice HTML di base:Etichette e campi nascosti in Internet Explorer (e jquery)

<input id="groups_ids_1" name="group_ids[]" type="checkbox" value="1" /> 
<label for="groups_ids_1">Display</label>

Questo funziona bene, ma se poi nascondere le caselle di controllo utilizzando

$('input[type=checkbox]').hide();

$('input[type=checkbox]').css('visibility', 'hidden');

Cliccando l'etichetta non è più controlla la casella di controllo IE. Certo che funziona bene in Firefox, Chrome e Safari.

fonte

2010-06-18 Peter Duijnstee

Si potrebbe provare ad aggiungere un onclick all'etichetta per risolvere i problemi di IE.

$('label').click(function() { 
    $('#' + $(this).attr('for')).click(); 
});

Se ciò non funziona, provare a impostare manualmente l'attributo.

fonte

2010-06-18 19:40:35

speravo in qualche modo per evitare questo un s Stavo usando il callback .changed per i miei campi checkbox, e questo mi sembrava un po 'hacky.Ma dopo alcuni esperimenti sembra essere l'unica soluzione. Grazie per la tua reazione :) –

Nota che questo potrebbe far scattare la casella di controllo 2 volte su altri browser –

Il modo migliore per evitare questo, è posizionare la casella di controllo assolutamente in alto: -1000px;

fonte

2012-01-09 17:36:57 pbcomm

caselle di controllo nascoste non ricevono gli eventi in versione di IE sotto 9. La mia soluzione generalizzata è la seguente:

/* hide checkboxes */ 
input[type=checkbox] { 
    visibility: hidden; 
    position: absolute; /* move out of document flow */ 
} 
/* ie8-: hidden inputs don't receive events, move out of viewport */ 
.lt-ie9 input[type=checkbox] { 
    visibility: visible; 
    top: -50px; 
}

Non spostare gli ingressi a sinistra o la pagina salterà in IE quando l'ingresso riceve attenzione! .lt-ie8 è una classe che è impostato sul tag HTML per le vecchie versioni di IE in questo modo: (vedi ad es: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->

Ma è possibile utilizzare il metodo preferito al fine di applicare le proprietà nella seconda regola per solo versione IE vecchia. Anche l'applicazione delle regole tramite JS dovrebbe funzionare, come sembra che tu stia facendo.

fonte

2012-03-07 13:26:53

Questa è una risposta molto migliore di quella accettata, vale anche la pena di leggere ciò che gli sviluppatori jquery avevano da dire sul problema, qui: http://bugs.jquery.com/ticket/8508 –

davvero molto utile. grazie mille. –

questo ha lavorato per me in IE8:

<!--[if IE 8 ]> 
<style> 
    input[type=checkbox] { 
    position: absolute; 
    filter: alpha(opacity=0); 
    } 
</style> 
<![endif]-->

fonte

2013-06-30 20:15:36 caseyjhol

Marc Diethelm: caselle di controllo nascoste non ricevono gli eventi in versione di IE sotto 9.

Come variante, invece visibility: hidden; o display: none, l'uso clip: rect(0 0 0 0);

Quindi invece

$('input[type=checkbox]').hide();

$('input[type=checkbox]').css('visibility', 'hidden');

uso qualcosa come

$('input:checkbox').addClass('hidden');

input[type=checkbox].hidden { 
    clip: rect(0 0 0 0); 
    position: absolute; /* move out of document flow */ 
}

Funziona in normali browser e in IE8

fonte

2013-08-23 12:43:41

Soluzione molto elegante. Esso funziona magicamente. Grazie! –

No, questo non è "elegante". Perché, perché applica una modifica/soluzione alternativa a tutti i browser per sempre. Anche se tutti i browser moderni supportano ovviamente il comportamento corretto con 'visibility: hidden'. Puoi essere molto sicuro che l'applicazione di 'clip' è molto (!) Più computazionalmente costosa rispetto alla soluzione predefinita. –

Etichette e campi nascosti in Internet Explorer (e jquery)

risposta

Problemi correlati