addClass et removeClass ne fonctionne pas dans Internet Explorer

fonctions jQuery addClass et removeClass ne fonctionnent pas correctement lorsque je les utiliser pour modifier l'apparence d'une case à cocher dans Internet Exploer (IE). Cependant, ils fonctionnent très bien dans d'autres navigateurs.

Voici un exemple de code pour illustrer mon problème:

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

Tester cela, vous pouvez exécuter le code à l'aide de jsFiddler (ne fonctionne pas sous IE):
http://jsfiddle.net/tejek/pZJMd/

OriginalL'auteur Tejek | 2011-03-10

  1. 4

    Votre sélecteur doit être $('#chkbox') si vous voulez qu'il fonctionne avec une seule case, l'un avec l'id chkbox, ou il devrait être $('input:checkbox') si vous voulez qu'il fonctionne à chaque case.

    Aussi, il est préférable d'utiliser l'événement de changement de lieu de l'événement click parce que l'événement click (théoriquement) ne devrait pas se déclencher si le changement a été fait par quelque chose d'autre qu'un clic de souris.

    Peut-être essayer quelque chose comme ceci:

    $('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

    Voir DÉMO.

    Si cela n'aide pas alors essayez d'ajouter et de supprimer les classes manuellement en HTML pour voir si peut-être le problème n'est pas l'ajout de classes mais pas montrer les effets de l'ajout des classes par d'étranges bizarreries mode de rendu ou de quelque chose.

    Assurez-vous de commencer votre HTML avec quelque chose comme ceci:

    <!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

    pour être sûr que vous êtes toujours obtenir les la plupart hors du moteur de rendu d'IE.

    +1 Bons points.
    Merci,j'en viens Maintenant à savoir, comment obtenir plus d'un problème de rendu fixe dans IE

    OriginalL'auteur rsp

  2. 1

    Ce sélecteur input:#chkbox semble bizarre. Essayez #chkbox si vous avez un seul élément avec l'ID #chkbox (et cela arrive à être un <input /> champ).

    Aussi, vous devriez probablement mettre en cache le résultat de $('#chkbox'), par exemple:

    var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

    Vous pourriez même utiliser .toggleClass() avec un switch (deuxième arg., non testé):

    var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

    Avertissement

    Non, cela n'explique pas pourquoi il a travaillé dans le Fx, Chrome etc. et pas sous IE. Je suppose que le sélecteur de mise en œuvre est quelque peu différente entre les navigateurs. En général, cela peut même pas résoudre le problème, mais seulement allusion à d'éventuels problèmes (et un "nettoyeur" de la solution).

    Sinon, $chkbox.checked si vous êtes certain que c'est un <input type="checkbox" />, cf. Utiliser la puissance impressionnante de jQuery pour accéder aux propriétés d'un élément.

    OriginalL'auteur jensgram