Haciendo clic en la casilla de verificación de etiqueta no marcada si está oculto al usar IE 7 u 8

Question

Estoy intentando crear una casilla de verificación personalizada utilizando la etiqueta asociada a un elemento de casilla de verificación y ocultando (mostrar: ninguno) la casilla de verificación.

Esto funciona bien en todos los navegadores, excepto en IE, que requiere que la casilla de verificación sea visible para que se pueda hacer clic en la etiqueta.

Aquí está mi código ...

HTML

<input type="checkbox" id="myCheck" />​ 

CSS

label.checkbox { 
    border:1px solid #666; 
    width:25px; 
    height:23px; 
    display:block; 
}​ 

jQuery

$("input[type=checkbox]").each(function() { 
    $(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
}); 

$("input[type=checkbox]").live('change', function() { 
    if ($(this).prop('checked') == true) { 
     $('label[for=' + $(this).attr("id") + ']').html("X") 
    } else { 
     $('label[for=' + $(this).attr("id") + ']').html("") 
    } 
});​ 

O jsfiddle

Answer 1

No sé si hay una forma más Efectiva de hacer esto, pero se puede hacer esto mediante el establecimiento de posición Elementos de casilla de verificación de la página,

.hiddenEl { 
    position:absolute; 
    top: -3000px; 
} 


$("input[type=checkbox]").each(function() { 
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
}); 

DEMO

---

ACTUALIZAR

Y también puede establecer opacidad checbox a cero, que lo ocultará sin "dispayl: ninguno",

$(this).css("opacity", 0) 

o

$(this).fadeTo(0, 0) 

Answer 2

probar esto:

#myCheck{ 
    position:absolute; 
    left:-9999px; 
    } 

y dejar la casilla de verificación "visible"