Clicking on label not checking checkbox if hidden when using IE 7 or 8
===

I am trying to create a custom designed checkbox using the label associated to a checkbox element and hiding (display:none) the checkbox.

This works fine in all browsers except IE, which requires the checkbox to be visible for the label to be clickable.

Here's my code...

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

Or [jsfiddle][1]


  [1]: http://jsfiddle.net/many_tentacles/hR6yf/1/