Etiquetas y campos ocultos en Internet Explorer (y jquery)

Tengo problemas para revisar las casillas de verificación ocultas en IE. Este es el HTML base:Etiquetas y campos ocultos en Internet Explorer (y jquery)

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

Esto funciona bien, pero si a continuación, ocultar las casillas de verificación utilizando

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

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

Al hacer clic en la etiqueta ya no comprueba la casilla de verificación en ES DECIR. Por supuesto, funciona bien en Firefox, Chrome y Safari.

Fuente

2010-06-18 Peter Duijnstee

Puede intentar agregar un clic a la etiqueta para evitar los problemas de IE.

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

Si eso no funciona, intente configurar el atributo manualmente.

$('label').click(function() { 
    var checkbox = $('#' + $(this).attr('for')); 
    if (checkbox.is(':checked')) { 
    checkbox.removeAttr('checked'); 
    } else { 
    checkbox.attr('checked', 'checked'); 
    } 
});

Fuente

2010-06-18 19:40:35

me esperaba alguna manera de evitar esto un s Estaba usando la devolución de llamada .changed para mis campos de casilla de verificación, y esto se sintió un poco hacky.Pero después de experimentar, parece ser la única solución. Gracias por su reacción :) –

Tenga en cuenta que esto podría activar la casilla cambiar 2 veces en otros navegadores –

La mejor manera de evitar esto, es colocar la casilla de verificación absolutamente en la parte superior: -1000px;

Fuente

2012-01-09 17:36:57 pbcomm

casillas ocultas no reciben eventos en la versión de IE por debajo de 9. Mi solución generalizada es el siguiente:

/* 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; 
}

No mueva las entradas a la izquierda o la página saltará en IE cuando la entrada recibe enfoque! .lt-ie8 es una clase que se encuentra en la etiqueta HTML para versiones antiguas de IE de esta manera: (véase, por ejemplo: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

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

pero se puede utilizar el método preferido para la aplicación de las propiedades en la segunda regla para vieja versión de IE solamente. Aplicar las reglas a través de JS debería funcionar también, como parece estar haciendo.

Fuente

2012-03-07 13:26:53

Esta es una respuesta mucho mejor que la aceptada, también vale la pena leer lo que los desarrolladores de jquery tenían que decir sobre el problema, aquí: http://bugs.jquery.com/ticket/8508 –

realmente muy útil. Muchas gracias. –

Esto funcionó para mí en IE8:

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

Fuente

2013-06-30 20:15:36 caseyjhol

Marc Diethelm: casillas de verificación ocultos no reciben eventos en la versión de IE por debajo de 9.

Como variante, en lugar visibility: hidden; o display: none, el uso clip: rect(0 0 0 0);

Así que en su lugar

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

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

usar algo como

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

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

Funciona en los navegadores normales y en IE8

Fuente

2013-08-23 12:43:41

Solución muy elegante. Funciona a las mil maravillas. ¡Gracias! –

No, esto no es "elegante". Porque aplica un truco/solución a todos los navegadores para siempre. Aunque todos los navegadores modernos, por supuesto, admiten el comportamiento correcto con 'visibility: hidden'. Puede estar muy seguro de que aplicar 'clip' es mucho más costoso desde el punto de vista computacional que la solución predeterminada. –

Etiquetas y campos ocultos en Internet Explorer (y jquery)

Respuesta

Cuestiones relacionadas