Etiquettes et champs masqués dans Internet Explorer (et jquery)

Je n'arrive pas à vérifier les cases à cocher masquées dans IE. Ceci est le code html de base:Etiquettes et champs masqués dans Internet Explorer (et jquery)

<input id="groups_ids_1" name="group_ids[]" type="checkbox" value="1" /> 
<label for="groups_ids_1">Display</label>

Cela fonctionne très bien, mais si je me cache alors les cases à cocher en utilisant soit

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

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

En cliquant sur l'étiquette ne vérifie la case à cocher dans C'EST À DIRE. Bien sûr, cela fonctionne très bien dans Firefox, Chrome et Safari.

Source

2010-06-18 Peter Duijnstee

Vous pourriez essayer d'ajouter un onclick à l'étiquette pour contourner les problèmes d'IE.

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

Si cela ne fonctionne pas, essayez de définir l'attribut manuellement.

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

Source

2010-06-18 19:40:35

j'espérais une certaine façon d'éviter c'est un s J'utilisais le callback .changed pour mes champs de cases à cocher, et cela me semblait un peu hacky.Mais après quelques expériences, il semble être la seule solution de contournement. Merci pour votre réaction :) –

Notez que cela peut déclencher la case à cocher changer 2 fois sur d'autres navigateurs –

La meilleure façon d'éviter cela est de placer la case à cocher tout en haut: -1000px;

Source

2012-01-09 17:36:57 pbcomm

cases cachées ne reçoivent pas les événements dans la version IE ci-dessous 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 vers la gauche ou la page va sauter dans IE lorsque l'entrée reçoit le focus! .lt-ie8 est une classe qui est définie sur la balise HTML pour les anciennes versions IE de cette manière: (voir par exemple: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->

Mais vous pouvez utiliser votre méthode préférée pour appliquer les propriétés dans la deuxième règle ancienne version IE uniquement. Appliquer les règles via JS devrait aussi fonctionner, comme vous semblez le faire.

Source

2012-03-07 13:26:53

Ceci est une bien meilleure réponse que celle acceptée, aussi vaut la peine de lire ce que les développeurs jquery avaient à dire sur le problème, ici: http://bugs.jquery.com/ticket/8508 –

vraiment très utile. Merci beaucoup. –

Cela a fonctionné pour moi dans IE8:

<!--[if IE 8 ]> 
<style> 
    input[type=checkbox] { 
    position: absolute; 
    filter: alpha(opacity=0); 
    } 
</style> 
<![endif]-->

Source

2013-06-30 20:15:36 caseyjhol

Marc Diethelm: cases à cocher cachés ne reçoivent pas les événements dans la version IE ci-dessous 9.

Comme variante, au lieu visibility: hidden; ou display: none, l'utilisation clip: rect(0 0 0 0);

Donc à la place

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

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

utiliser quelque chose comme

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

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

Il fonctionne dans les navigateurs normaux et IE8

Source

2013-08-23 12:43:41

Solution très élégante. Il fonctionne comme un charme. Je vous remercie! –

Non, ce n'est pas "élégant". Pourquoi, parce qu'il applique un hack/solution de contournement à tous les navigateurs pour toujours. Même si tous les navigateurs modernes supportent bien le comportement correct avec 'visibility: hidden'. Vous pouvez être sûr que l'application 'clip' est beaucoup plus (!) Plus coûteuse que la solution par défaut. –

Etiquettes et champs masqués dans Internet Explorer (et jquery)

Répondre

Questions connexes