使用IE 7或8时,如果隐藏,则单击标签不检查复选框

Question

我正在尝试使用与checkbox元素关联的标签创建一个自定义设计的复选框,并隐藏(display:none)复选框.

这在除IE之外的所有浏览器中都能正常工作,这需要使复选框可见,以便标签可以点击.

这是我的代码......

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

或者是jsfiddle

Answer 1

我不知道是否有更有效的方法来做到这一点,但你可以通过设置页面外的复选框元素位置来做到这一点,

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


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

DEMO

UPDATE

而且你也可以将checbox opacity设置为零,这将隐藏它而不使用"dispayl:none",

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

要么

$(this).fadeTo(0, 0)