IE - nút radio ẩn không được chọn khi nhãn tương ứng được nhấp

Question

Tôi vừa nhận thấy một hành vi lạ trong IE7.

Tôi có nút radio có nhãn có liên quan như sau:

<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" /> 
<label for="filter_1">Activities</label> 

<input type="radio" name="filter" id="filter_2" value="Services" /> 
<label for="filter_2">Services</label> 

Các nút radio được giấu qua css với display: none hoặc visibility: hidden (đừng hỏi)

Vấn đề là - khi tôi nhấp vào nhãn trong IE7 (chưa xem xét các phiên bản IE khác), nút radio liên quan không thực sự được kiểm tra. Tôi xác nhận điều này với jquery - sự kiện bấm nhãn được kích hoạt, nhưng sự kiện bấm nút radio thì không. Một biểu mẫu đăng bài cũng xác nhận rằng nút radio đã chọn không thay đổi.

Điều này hoạt động chính xác trong firefox và cũng hoạt động chính xác nếu tôi xóa CSS ẩn các nút radio.

Đây có phải là lỗi IE hoặc tôi thiếu gì đó không?

Answer 1

Nó có thể là để làm với display: none - bạn cũng có thể thấy rằng các yếu tố ẩn không nhận được giá trị của họ gửi với phần còn lại của biểu mẫu. Nếu bạn có quyền kiểm soát nó, bạn có thể muốn thử positioning the elements off screen rather then hiding them.

Answer 2

Sự cố này tồn tại trong IE6, 7, 8 và thậm chí là phiên bản beta 9 hiện tại. Để khắc phục, việc định vị màn hình tắt nút radio là một ý tưởng hay.

Đây là giải pháp thay thế không liên quan đến nhà thiết kế hoặc css: Ẩn nút bình thường và thực hiện bất kỳ chức năng nào xử lý sự kiện nhấp cho nút cũng xử lý sự kiện nhấp cho nhãn.

Answer 3

Thay

style="display:none;" 

với

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;" 

Answer 4

$("label").click(function(e){ 
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
}); 

Cảm ơn ngõ cho việc này. Tôi đang thêm nó như là một câu trả lời ở đây để mọi người không bỏ qua bình luận của bạn.

Answer 5

Bạn có thể thử điều này cho IE7,8:

input{ 
    position: absolute; 
    z-index: -1; 
} 

thay vì

input{ 
    display: none; 
} 

Answer 6

này làm việc cho tôi

width: 0px; 

Tested trong IE7 và IE8. CSS thuần túy không có javascript.

Answer 7

Có một số biên soạn tốt đẹp của mệnh đề của bạn:

input { 
-moz-opacity:0; 
filter:alpha(opacity:0); 
opacity:0; 
position: absolute; 
} 

thay vì:

display: none; 

Answer 8

Đây là một câu trả lời wiki để quy tụ tất cả các câu trả lời khác nhau và các tùy chọn.

Lựa chọn 1: Di chuyển các yếu tố ngoài màn hình như trái ngược với giấu nó hoàn toàn

position: absolute; 
top: -50px; 
left: -50px; 

Phương án 2: Sử dụng một chút hoạt Javascript để thiết lập các nút radio để kiểm tra khi nhãn được nhấp

$("label").click(function(e){ 
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
}); 

Lựa chọn 3: Đặt chiều rộng và/hoặc opacity của phần tử bằng không

width: 0; 
/* and/or */ 
-moz-opacity:0; 
filter:alpha(opacity:0); 
opacity:0; 
outline:none; /* this prevents IE8 from having the line around it even though it's invisible */ 

Lựa chọn 4: Sử dụng một trình duyệt khác :)

Về cơ bản, spec cho những việc này không nêu cụ thể những gì hành vi sử dụng, nhưng IE thông thường phải mất lập trường rằng nếu nó không thể là nhìn thấy, sau đó nó không hoạt động. "Nhìn thấy" và "công việc" có thể có nghĩa là những thứ khác nhau, nhưng trong trường hợp này nó có nghĩa là khi display:none được đặt, nhãn không kích hoạt nút radio, dẫn đến các cách giải quyết thông thường cần thiết cho rất nhiều thứ trong IE.

Answer 9

Tôi đã sử dụng chức năng jQuery hide(), vì vậy không dễ thay đổi cách phần tử ẩn mà không cần viết mã phức tạp hơn. Tôi tìm thấy ý tưởng này: Tôi sử dụng lớp để lưu trữ thuộc tính đã chọn và đặt thuộc tính này trở lại ngay trước khi gửi.

if ($.browser.msie && $.browser.version == 7.0) { 
$('input[type=radio]').click(function() { 
    $('input[name="'+$(this).attr("name")+'"]').each(function(){ 
     if ($(this).attr("checked")){ 
      $(this).addClass("checked"); 
     }else{ 
      $(this).removeClass("checked"); 
     } 
    }); 
}); 
$('form').submit(function(){ 
    $('input.checked').each(function(){ 
     $(this).attr("checked","true"); 
    }); 
}); 
} 

Nó hoạt động như một sự quyến rũ trong trường hợp của tôi.