Nhấp vào hộp kiểm không chọn nhãn nếu bị ẩn khi sử dụng IE 7 hoặc 8

Question

Tôi đang cố tạo hộp kiểm được thiết kế tùy chỉnh bằng cách sử dụng nhãn được liên kết với phần tử hộp kiểm và ẩn (hiển thị: không) hộp kiểm.

Tính năng này hoạt động tốt trong tất cả các trình duyệt ngoại trừ IE, yêu cầu hộp kiểm hiển thị cho nhãn có thể nhấp được.

Dưới đây là mã của tôi ...

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

Hoặc jsfiddle

012.

Answer 1

Tôi không biết liệu có một cách efective hơn để làm điều này, nhưng bạn có thể làm điều này bằng cách thiết lập vị trí nguyên tố checkbox ra khỏi trang,

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


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

DEMO

---

CẬP NHẬT

Và bạn cũng có thể đặt độ mờ đục của checbox thành 0, sẽ ẩn nó mà không có "dispayl: none",

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

hoặc

$(this).fadeTo(0, 0) 

Answer 2

thử điều này:

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

Và rời khỏi hộp kiểm "nhìn thấy"