Discussion :

[antoinev2]

Bonjour,

Dans un formulaire, j'ai le bouton "submit" suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" name="maj" size="5" value="éditer" onclick="msg_sel_info()" disabled="true" id="f_selec_desact"/>

Ce bouton est donc désactivé.

J'ai déjà une fonction Javascript qui active ce bouton ensuite ; je voudrais que cette fonction modifie aussi l'identificateur CSS, par exemple appliquer l'identificateur "f_selec" au lieu de "f_selec_desact".

J'ai trouvé comment changer la classe, mais pas l'id...

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('f_selec_desact').id = 'f_selec';

non ?

[antoinev2]

Ah si c'est exactement ça, merci!

[dukej]

Ah si c'est exactement ça, merci!

Pourquoi ne pas lui rajouter une classe CSS qui surcharges ce sélecteur CSS et du coup c'est beaucoup plus propre.
Changer l'id d'un élément revient à foutre le bordel dans la logique du code.


html pour bouton normal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" name="maj" size="5" value="éditer" onclick="msg_sel_info()" id="f_selec"/>

html pour bouton désctivé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" name="maj" size="5" value="éditer" onclick="msg_sel_info()" disabled="true" id="f_selec" className="disabled"/>

le javascript qui va bien c'est un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var bouton = document.getElementById('f_selec');
if(monboutondoitetredisabled) {
   bouton.className = ' disabled';
   bouton.diabled = true;
} else {
   bouton.className = bouton.className.replace(/\bdisabled\b);
   bouton.disabled = false;
}

code CSS associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#f_select {
/*ici la css concernant le bouton*/
}
 
#f_select.disabled {
/*ici la css qui rajoute ou écrase les styles déclarés dans le sélecteur précédent, pas besoin de refaire un copier coller de toutes les lignes CSS*/
}

Voila