IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

.disabled = true/false ne modifie pas l'affichage sous IE


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Avatar de strat0
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2003
    Messages
    288
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Novembre 2003
    Messages : 288
    Par défaut .disabled = true/false ne modifie pas l'affichage sous IE
    Bonjouuuuuuur,

    Ça fait une heure que je planche sur ce problème donc il est sans doute temps de poster.

    D'abord, sachez que ce problème est particulier à IE et qu'il ne se pose pas sous Firefox.

    J'ai une CheckBox, et lorsque l'on clique dessus, je veux que des boutons Radio qui étaient "disabled" ne le soient plus.

    Voilà mon code JavaScript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function ClickCheckBox(Objet)
    {
        //Spécial IE
        if(window.navigator.appName == 'Microsoft Internet Explorer')
        {
            var SpanRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("span");
     
            for (i in SpanRadio)
            {
                SpanRadio[i].disabled = !document.getElementById(Objet).checked;
            }
        }
     
        var ListeRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("input");
     
        for (i in ListeRadio)
        {
            ListeRadio[i].disabled = !document.getElementById(Objet).checked;
            ListeRadio[i].type = "checkbox";
            alert(ListeRadio[i].disabled);
        }
    }
    Le code HTML (généré par ASP.net 2.0) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <tr><td><input name="GridViewInterets$ctl05$CheckBoxInterets" type="checkbox" id="GridViewInterets_ctl05_CheckBoxInterets" onclick="javascript:ClickCheckBox(this.id);" /></td>
    <td style="width:100px;">
                            <table id="GridViewInterets_ctl05_RadioButtonListInterets" border="0">
     
    				<tr>
    					<td><span disabled="disabled"><input id="GridViewInterets_ctl05_RadioButtonListInterets_0" type="radio" name="GridViewInterets$ctl05$RadioButtonListInterets" value="Un peu" checked="checked" disabled="disabled" /><label for="GridViewInterets_ctl05_RadioButtonListInterets_0">Un peu</label></span></td>
    				</tr><tr>
    					<td><span disabled="disabled"><input id="GridViewInterets_ctl05_RadioButtonListInterets_1" type="radio" name="GridViewInterets$ctl05$RadioButtonListInterets" value="Beaucoup" disabled="disabled" /><label for="GridViewInterets_ctl05_RadioButtonListInterets_1">Beaucoup</label></span></td>
    				</tr><tr>
    					<td><span disabled="disabled"><input id="GridViewInterets_ctl05_RadioButtonListInterets_2" type="radio" name="GridViewInterets$ctl05$RadioButtonListInterets" value="A la folie" disabled="disabled" /><label for="GridViewInterets_ctl05_RadioButtonListInterets_2">A la folie</label></span></td>
    				</tr>
     
    			</table>
    La partie "spécial IE" est inutile sous Firefox, mais sous IE, à défaut de rendre les boutons Radio "enabled" elle enlève l'effet grisé sur le texte dans le span ("Un peu", "Beaucoup", "A la folie"). Le code généré par ASP.net implique que je n'ai pas complètement la main sur la structure HTML.

    Chose étrange, le "alert" dans mon code JavaScript me renvoie bien "true" ou "false" quand je clique sur la checkbox sous IE, mais les boutons Radio restent grisés. Il faut que à la main, avec la Developer Toolbar de IE, je supprime l'attribut "disabled" des <input type="radio" /> pour enlever le grisé.

    On en arrive donc au sujet de mon message : IE prend en compte le ".disabled = true/false;", mais ne modifie pas l'affichage en conséquence(???).

    De la même manière, en faisant "ListeRadio[i].type = "checkbox";", Firefox transforme bien les boutons Radio en CheckBox mais pas IE.

    Alors? Bug de IE?

    Merci d'avance pour vos suggestions et réponses.

  2. #2
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    L'attribut disabled est un faux ami.

    En HTML 3.0 et inférieur, il ne prenait pas de valeur. Le simple fait d'exister ou pas suffisait.
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input disabled type=radio>

    En HTML 4.0, il faut normalement lui donner une valeur "disabled"
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="radio" disabled="disabled" />
    mais pour IE, qui fonctionne comme au temps de l'HTML 3.0, cette valeur peut aussi bien être "true", "false," "on", "off", "0", "1", "yes", "no", "disabled", "enabled" que "readonly", ca n'a aucune importance. Il se fait que dès lors, la propriété disabled, qui mappe cet attribut, en change certes la valeur, mais n'influe pas sur son comportement....

    Il se fait que FireFox a fait le choix (judicieux du point du vue du développeur) de mapper différemment la propriété disabled...

    Il faut supprimer l'attribut pour que ca marche : http://developer.mozilla.org/fr/docs...eAttributeNode

  3. #3
    Membre éclairé
    Avatar de strat0
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2003
    Messages
    288
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Novembre 2003
    Messages : 288
    Par défaut
    Ça paraît tomber sous le sens effectivement (même si ce n'est pas très malin de la part des développeurs de IE), mais... j'y arrive pas.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var ListeRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("input");
     
    for (i in ListeRadio)
    {
        if (document.getElementById(Objet).checked)
            ListeRadio[i].removeAttribute("disabled");
        else
            ListeRadio[i].setAttribute("disabled", "true");
    }
    Ça me dit "ListeRadio[i].removeAttribute is not a function" ou "ListeRadio[i].setAttribute" is not a function (sous Firebug).

    Pourtant dans ListeRadio[i] je devrais bien avoir la liste des éléments <input> sur lesquels je veux agir (???).

    Quand je fais un "alert(ListeRadio[i]);" dans la boucle ça me sort des choses bizarre.

    Sous IE : 3, [Object], [Object], [Object].

    Sous FF : [objet HTMLInputElement], [objet HTMLInputElement], [objet HTMLInputElement], 3, function item() { [native code] }, function namedItem() { [native code] }.

    ???

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var ListeRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("input");
     
    if (document.getElementById(Objet).checked)
    for (i=0; i < ListeRadio.length; i++) ListeRadio[i].removeAttribute("disabled");
    else
    for (i=0; i < ListeRadio.length; i++) ListeRadio[i].disabled=true;
    A+

  5. #5
    Membre éclairé
    Avatar de strat0
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2003
    Messages
    288
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Novembre 2003
    Messages : 288
    Par défaut
    Bizarrement ça fonctionne beaucoup mieux avec une boucle de type for (var i = 0; ... :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function ClickCheckBox(Objet)
    {
        var ListeSpan = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("span");
     
        for (var i = 0; i < ListeSpan.length; i++)
            ListeSpan[i].disabled = !document.getElementById(Objet).checked;
     
        var ListeRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("input");
     
        for(var i = 0; i < ListeRadio.length; i++)
            ListeRadio[i].disabled = !document.getElementById(Objet).checked;
    }
    Même pas besoin d'effacer l'attribut "disabled", ça fonctionne même sous IE.

    Mais merci de ton aide.

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Juste, pour éviter des accès inutiles aux objets de ta page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function ClickCheckBox(Objet)
    {var blnCheckOrNot = !document.getElementById(Objet).checked;
        var ListeSpan = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("span");
     
        for (var i = 0; i < ListeSpan.length; i++)
            ListeSpan[i].disabled = blnCheckOrNot;
        
        var ListeRadio = document.getElementById(Objet).parentNode.nextSibling.getElementsByTagName("input");
        
        for(var i = 0; i < ListeRadio.length; i++)
            ListeRadio[i].disabled = blnCheckOrNot;
    }
    A+

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Infobulle: pas d'affichage sous IE6 & Konqueror 3.5
    Par Rolf-IV dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/10/2009, 16h11
  2. Pas d'affichage sous IE
    Par Yep_yep dans le forum Servlets/JSP
    Réponses: 8
    Dernier message: 15/12/2008, 10h44
  3. Liens externes avec icônes pas d'affichage sous IE
    Par Olivier Regnier dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 06/06/2008, 22h17
  4. Pas d'affichage sous Firefox
    Par bouchette63 dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 27/06/2006, 09h13
  5. [XSL] Pas d'affichage sous firefox
    Par bouchette63 dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 17/05/2006, 14h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo