Щелчок по метке без установки флажка, если он скрыт при использовании IE 7 или 8

Я пытаюсь создать настраиваемый флажок, используя метку, связанную с элементом флажка, и скрыв (отображение :нет )флажка.

Это отлично работает во всех браузерах, кроме IE, для которого требуется, чтобы флажок был виден, чтобы метка была активной.

Вот мой код...

HTML

​

CSS

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

jQuery

$("input[type=checkbox]").each(function() {
    $(this).hide().before('');
});

$("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("")
    }
});​

Или jsfiddle