IE - bouton radio masqué non coché lorsque l'utilisateur clique sur l'étiquette correspondante

Question

J'ai juste remarqué un comportement étrange dans IE7.

J'ai des boutons radio associés à des étiquettes comme suit:

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

Le bouton radio est caché via css avec display:none ou visibility: hidden (ne demandez pas)

Le problème est lorsque je clique sur l'étiquette dans IE7 (n'ont pas regardé les autres versions IE encore) les associés de la radio bouton n'est pas cochée. J'ai confirmé ce avec jquery - l'étiquette, cliquez sur l'événement est déclenché, mais le bouton radio et cliquez sur l'événement ne l'est pas. Un formulaire post confirme également que les coché le bouton radio ne change pas.

Cela fonctionne correctement dans firefox, et fonctionne correctement si je supprime le CSS qui cache les boutons de la radio.

Est-ce un IE bug ou ai-je raté quelque chose?

Answer 1

C'est probablement à voir avec l' display: none - vous pouvez également trouver que les éléments cachés de ne pas obtenir leurs valeurs présentées avec le reste de la forme. Si vous avez le contrôle sur elle, vous pouvez essayer de positionnement des éléments hors de l'écran, plutôt que de les cacher.

Answer 2

C'est un wiki réponse à rassembler toutes les différentes réponses et des solutions.

Option 1: Déplacer l'élément hors de l'écran plutôt que de les cacher complètement

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

Option 2: Utiliser un peu de JavaScript pour le bouton radio coché lorsque l'étiquette est cliqué

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

Option 3: Définir la largeur de l'élément et/ou l'opacité à zéro

width: 0;
/* and/or */
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;

Option 4: Utiliser un autre navigateur :)

Fondamentalement, la spécification de ces choses n'est pas spécifiquement l'état de ce comportement, pour l'utiliser, mais IE prend généralement la position que si elle ne peut pas être vu, alors il ne fonctionne pas. "Vu" et le "travail" peut signifier différentes choses, mais dans ce cas, cela signifie que lorsqu' display:none est défini, l'étiquette n'a pas activer le bouton radio, ce qui conduit à l'habitude des solutions de contournement nécessaire pour beaucoup de choses dans IE.

Answer 3

Cela fonctionne pour moi

width: 0px;

Testé dans IE7 et IE8. Pur CSS sans javascript.

Answer 4

Ce problème existe dans IE6, 7, 8, et même le courant 9 beta. Comme un correctif, en positionnant le bouton radio à l'écran est une bonne idée.

Voici une alternative qui n'a pas à impliquer le concepteur ou le css: Masquer le bouton normalement, et faire toutes les fonction gère l'événement click du bouton aussi gérer l'événement click pour l'étiquette.

Answer 5

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

Merci de Voie pour cela. Je suis de l'ajouter comme une réponse ici afin que les gens ne négligez pas votre commentaire.