jQuery Girl
  1. jQuery Girl
  3. Étiquettes et champs cachés dans Internet Explorer (et jquery)
Intereting Posts
Pourquoi vois-je des exemples MS jQuery utiliser `$ (domReady); `? Comment envoyer le paramètre basé sur quel bouton est cliqué dans modal? Fancybox: iframe ne fonctionne pas comparer deux types de tableaux différents en javascript ou jquery Comment lier JQuery draggable à un événement de survol Modification de la valeur d’un bouton mobile jQuery à l’aide de jQuery (jQuery / Selectors) sélectionne un élément après une classe spécifiée F11 Evénement de clé déclenché lors du chargement à l’aide de javascript JQuery: Pourquoi le positionnement relatif de l’élément revient-il en haut de la fenêtre (0,0) parfois et correctement chez d’autres? Puis-je append des boutons à “alerte” jQuery? Manipulation DOM sur impression uniquement JQuery est importé mais AJAX ne fonctionne pas? Performance: Pure CSS vs jQuery jquery couleur d’arrière-plan fade in scroll Changer la couleur de fond CSS avec Timer JQuery

Étiquettes et champs cachés dans Internet Explorer (et jquery)

Je ne parviens pas à vérifier les cases à cocher cachées dans IE. C’est le html de base:

Cela fonctionne bien, mais si je cache ensuite les cases à cocher en utilisant soit 

 $('input[type=checkbox]').hide();

ou 

 $('input[type=checkbox]').css('visibility', 'hidden');

Cliquer sur l’étiquette ne coche plus la case dans IE. Bien sûr, cela fonctionne très bien dans Firefox, Chrome et Safari.

Vous pouvez essayer d’append un onclick à l’étiquette pour résoudre les problèmes liés à IE. 

 $('label').click(function() { $('#' + $(this).attr('for')).click(); });

Si cela ne fonctionne pas, essayez de définir l’atsortingbut manuellement. 

 $('label').click(function() { var checkbox = $('#' + $(this).attr('for')); if (checkbox.is(':checked')) { checkbox.removeAttr('checked'); } else { checkbox.attr('checked', 'checked'); } });

Les cases à cocher masquées ne reçoivent pas les événements dans la version d’IE inférieure à 9. Ma solution généralisée est la suivante: 

 /* hide checkboxes */ input[type=checkbox] { visibility: hidden; position: absolute; /* move out of document flow */ } /* ie8-: hidden inputs don't receive events, move out of viewport */ .lt-ie9 input[type=checkbox] { visibility: visible; top: -50px; }

Ne déplacez pas les entrées à gauche ou la page sautera dans IE lorsque l’entrée reçoit le focus! .lt-ie8 est une classe définie de la manière suivante sur la balise HTML pour les anciennes versions d’IE: (voir par exemple: https://github.com/h5bp/html5-boilerplate/blob/master/index.html )

Mais vous pouvez utiliser votre méthode préférée pour appliquer les propriétés de la seconde règle à l’ancienne version d’IE uniquement. L’application des règles via JS devrait également fonctionner, comme vous semblez le faire.

Le meilleur moyen d’éviter cela est de positionner la case absolument en haut: -1000px;

Marc Diethelm : Les cases à cocher masquées ne reçoivent pas les événements de la version IE inférieure à 9.

En variante, à la place visibility: hidden; ou display: none , utilisez clip: rect(0 0 0 0);

Donc au lieu 

 $('input[type=checkbox]').hide();

ou 

 $('input[type=checkbox]').css('visibility', 'hidden');

utiliser quelque chose comme 

 $('input:checkbox').addClass('hidden');

et 

 input[type=checkbox].hidden { clip: rect(0 0 0 0); position: absolute; /* move out of document flow */ }

Cela fonctionne dans les navigateurs normaux et dans IE8

Cela a fonctionné pour moi dans IE8: