Discussion :

[strat0]

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.

[FremyCompany]

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

[strat0]

Ç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] }.

???

[E.Bzz]

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+

[strat0]

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.

[E.Bzz]

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+