IE - ukryty przycisk radiowy nie sprawdzany po kliknięciu odpowiedniej etykiety

Question

Po prostu zauważyłem dziwne zachowanie w IE7.

mam przyciski radiowe z powiązanymi etykietami w następujący sposób:

<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> 

Radio Przycisk jest ukryty za pośrednictwem css z display: none lub visibility: hidden (nie pytajcie)

Problem polega na tym - kiedy kliknę etykietę w IE7 (nie obejrzałem jeszcze innych wersji IE), skojarzony z nim przycisk radiowy nie jest faktycznie sprawdzany. Potwierdziłem to za pomocą jquery - zdarzenie click zdarzenia label jest uruchomione, ale zdarzenie click radio button nie jest. Formularz pocztowy potwierdza również, że zaznaczony przycisk radiowy się nie zmienia.

Działa to poprawnie w firefoxie, a także działa poprawnie, jeśli usunę CSS, który ukrywa przyciski radiowe.

Czy to jest błąd IE, czy też coś mi brakuje?

Answer 1

Prawdopodobnie ma to związek z display: none - możesz również zauważyć, że ukryte elementy nie mają wartości przesłanych z resztą formularza. Jeśli masz nad nim kontrolę, możesz spróbować positioning the elements off screen rather then hiding them.

Answer 2

Ten problem występuje w IE6, 7, 8, a nawet w bieżącej wersji 9 beta. W przypadku poprawki dobrym rozwiązaniem jest umieszczenie przycisku opcji poza ekranem.

Oto alternatywa, która nie musi angażować projektanta lub css: Ukrywanie przycisku w normalny sposób i ustawianie dowolnej funkcji dla zdarzenia kliknięcia przycisku powoduje również obsługę zdarzenia kliknięcia dla etykiety.

Answer 3

Wymień

style="display:none;" 

z

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

Answer 4

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

Lane Dzięki za to. Dodaję to jako odpowiedź, więc ludzie nie przeoczą twojego komentarza.

Answer 5

Można spróbować to dla IE7,8:

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

zamiast

input{ 
    display: none; 
} 

Answer 6

Działa to dla mnie

width: 0px; 

Testowany w IE7 i IE8. Czysty kod CSS bez javascript.

Answer 7

Istnieją pewne miłe kompilacją Twoich propozycji:

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

zamiast:

display: none; 

Answer 8

Jest to odpowiedź wiki zgromadzić wszystkie różne odpowiedzi i opcji.

Wariant 1: Przenieś element poza ekranem, a nie ukrywanie go całkowicie

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

Opcja 2: Użyj trochę JavaScript, aby ustawić opcję, aby sprawdził, gdy etykieta kliknięciu

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

Wariant 3: ustawiona szerokość i/lub mętności elementu zero

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 */ 

Wariant 4: użyć innej przeglądarki :)

Zasadniczo, spec tych rzeczy nie wskazuje wyraźnie, jakie zachowanie w użyciu, ale IE generalnie stoi na stanowisku, że jeśli nie może być widać, to nie działa. "Widziane" i "praca" mogą oznaczać różne rzeczy, ale w tym przypadku oznacza to, że po ustawieniu display:none etykieta nie aktywuje przycisku radiowego, co prowadzi do zwykle obejść niezbędnych dla tak wielu rzeczy w IE.

Answer 9

Używałem funkcji jQuery hide(), więc nie było łatwo zmienić sposób ukrywania elementu bez pisania bardziej złożonego kodu. Znalazłem ten pomysł: Używam klasy do przechowywania sprawdzanego atrybutu i ustaw ten atrybut ponownie przed wysłaniem.

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

Działa jak urok w moim przypadku.