Griser et dégriser un champ en fonction d'une case cochée

Version imprimable

19/06/2008, 10h17
nickoeuh

Griser et dégriser un champ en fonction d'une case cochée

Bonjour.

Je viens à vous car j'ai encore des soucis de JS au boulot.
Je crois que je ne vais pas avoir le choix et me mettre à l'étudier sérieusement, mais actuellement je n'ai pas le temps, le client n'attendra pas que j'pige pour recevoir son backoff.

Voilà mon problème :

J'ai un formulaire qui doit réagir instantanément... Ajax ?
Bref, de base j'ai une checkbox qui est cochée.
A coté de cette checkbox j'ai un input. J'aimerais que lorsque la checkbox est cochée, l'input soit grisé et lorsqu'elle est décochée, il ne soit plus grisé.

On voit ça parfois mais je n'ai aucune idée de comment réaliser une telle action.

Je m'en remets donc à votre bon coeur.

Naturellement j'étudierai la proposition afin d'en comprendre le principe.

Merci d'avance.
19/06/2008, 10h29
tusssss

Il suffit de changer la couleur en gris et de la passer en readOnly, ca c'est pour quelque chose de certain, je ne sais pas ce qui se passe quand on passe un champ text en disabled, ca fait peut être cela tout seul...

Je vais tester de ce pas....
19/06/2008, 10h35
tusssss

Ça a l'air de plutôt pas mal fonctionner.

Si ton input text à un id ça sera facile.

Après avoir testé si la checkbox est cochée ou non,

Il suffit donc de récupérer le input de cette manière et de le griser comme ceci:

Code:

document.getElementById('ton_id_champ_input').disabled=true;

Je te remercie de ta réponse que j'ai lue instantanément.
Et je n'y arrive pas. Rien ne fonctionne.

Peut-etre est-ce le test, en fait j'en sais rien ^^.

Voilà mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				<td class="lab">Prix d'exécution <?php if(isset($exe_price) != NULL || isset($exe_price) != 'pnd_exe') { ?><span class="parenthese">(<?php echo $price; ?> €) <?php } else { echo '( en € )'; } ?></span></td>
				<td class="prix">
					<input type="text" name="millier_exe" id="millier_exe" value="<?php echo $millier; ?>" class="large" maxlength="3" />
					<input type="text" name="centaine_exe" id="centaine_exe" value="<?php echo $centaine; ?>" class="large" maxlength="3" />, 
					<input type="text" name="decimale_exe" id="decimale_exe" value="<?php echo $decimal; ?>" class="large" maxlength="2" /> €<br />ou<br />
					<input type="checkbox" value="pnd_exe" name="pnd_exe" id="pnd_exe" <?php if($exe_price == pnd_exe || $exe_price == NULL) { echo 'checked="checked"'; } ?>/> PND
				</td>
 
				<script>
		if(document.forms["formulaire"].element["pnd_exe"].checked == true)
		{
		document.getElementById('millier_exe').disabled=true;
		}
 
		</script>

It does not work :(

19/06/2008, 11h18
tusssss
Il faut que tu places ton javascript dans une fonction comme par exemple comme ceci :
Code:

1 2 3 4 5 6 7 8 9 <script> function DesactiverZoneTexte() { if(document.forms["formulaire"].element["pnd_exe"].checked ==true) { document.getElementById('millier_exe').disabled=true; } } </script>
Ensuite tu places ce code entre les balises <head> et </head> de ta page.

Ensuite, dans la balise de ta checkbox, viens insérer un :
Code:

1 2 onchange="DesactiverZoneTexte();"
Ca devrait fonctionner après ca.

Bon courage
19/06/2008, 11h30
nickoeuh

Ca ne fonctionne toujours pas :(
19/06/2008, 11h33
tusssss

Tu peux essayer de mettre un alert avec un message dans le if de la fonction pour voir si elle est exécutée ?

Je peux voir le code avec les balises form, pour voir l'appel pour la condition du if?
19/06/2008, 11h35
tusssss

Remplaces ça :

Code:

document.forms["formulaire"].element["pnd_exe"].checked ==true

par

Code:

document.getElementById('pnd_exe').checked

Alors apparemment la fonction ne s'exécute pas, vu que l'alerte ne se lance pas.

Mon formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
<form method="post" action="<?php echo $lien; ?>" name="formulaire">
	<table class="price">
 
			<tr>
				<td class="prix">
					<input type="text" name="millier_exe" id="millier_exe" value="<?php echo $millier; ?>" class="large" maxlength="3" />
					<input type="text" name="centaine_exe" id="centaine_exe" value="<?php echo $centaine; ?>" class="large" maxlength="3" />, 
					<input type="text" name="decimale_exe" id="decimale_exe" value="<?php echo $decimal; ?>" class="large" maxlength="2" /> €<br />ou<br />
					<input type="checkbox" onchange="DesactiverZoneTexte();" value="pnd_exe" name="pnd_exe" id="pnd_exe" <?php if($exe_price == pnd_exe || $exe_price == NULL) { echo 'checked="checked"'; } ?>/> PND
				</td>

Merci de te pencher sur mon problème c'est super sympa. Est-ce possible que ce soit parce que la checkbox soit après les input qu'il faut griser ?

19/06/2008, 11h53
tusssss

L'ordre des champs textes et de la textbox n'ont aucune importance.

As tu essayé avec la dernière modification avec le getElementById?

Si oui, je ne vois pas ce qui peut bloquer à part peut-être le fait que tu viennes cocher ta checkbox à l'aide d'une fonction PHP et que le onchange ne serait pas activé dans ce cas la. Sur ce point la je n'ai aucune certitude.

Bon courage.
19/06/2008, 11h55
nickoeuh

Oui j'ai essayé avec ton changement, rien n'y a fait.

Le mélange PHP & JS n'est pas conseillé ?
19/06/2008, 12h03
tusssss

Pas de réelle contre indication, cependant, je ne sais pas si un changement du statut de ta checkbox est détecté par le onchange qui est placé sur la balise.

De toute façon, si on ne rentre pas dans la fonction c'est que le onchange n'est jamais activé, donc le problème provient surement de la...
19/06/2008, 12h11
nickoeuh

Je te remercie de ton aide, j'ai compris les codes que tu m'as montré donc j'avance.

J'vais essayer de fixer ça par rapport au PHP.
19/06/2008, 12h16
tusssss

Oui la je suis désolé tu as atteins mes limites qui ne sont pas élevées

Voilà la fonction javascript qu'il faut utiliser:
Code:

1 2 3 4 5 6 7 8 9 10 11 function disableElement(elemId, checkbox) { if( document.getElementById(checkbox).checked ) { document.getElementById(elemId).disabled = 'disabled'; } else { document.getElementById(elemId).disabled = ''; } }
et tu met

Code:

<input type="checkbox" name="xxx" id="xxx" value="1" onClick="hideElement('nom_du_input','xxx');"></input>

19/06/2008, 12h32
nickoeuh

Ahh on y est presque !!!
Ca fonctionne à merveille quand je clique dessus.

Le dernier problème c'est que si ma case est cochée de base, quand j'arrive sur la page, ca ne fonctionne pas.

Ca ne marche qu'au click, normal on dit onClick.

Citation:
Envoyé par Kyaan
Voilà la fonction javascript qu'il faut utiliser:
Code:

1 2 3 4 5 6 7 8 9 10 11 function disableElement(elemId, checkbox) { if( document.getElementById(checkbox).checked ) { document.getElementById(elemId).disabled = 'disabled'; } else { document.getElementById(elemId).disabled = ''; } }
et tu met

Code:

<input type="checkbox" name="xxx" id="xxx" value="1" onClick="hideElement('nom_du_input','xxx');"></input>
La, je ne comprends même pas comment ca peut fonctionner, tu construis une fonction disableElement et tu appelles une fonction hideElement et ca fonctionne.

Je suis encore loin de comprendre le Javascript...

19/06/2008, 13h58
Kyaan

ha pardon il faut bien sur appeler disableElement, j'ai adapté un de mes script pour répondre à la question et j'ai simplement oublié de modifier un bout.

Pour l'initialisation il suffit d'appeler la fonction avec javascript tu met disableElement('nom_du_input','xxx'); dans les balises <script> et ça va désactiver l'input au démarrage si la case est coché par défaut.
19/06/2008, 14h05
tusssss

Finalement, je viens de comprendre pourquoi ca fonctionnait pas avec mon code, la checkbox étant cochée à l'origine et n'ayant pas de code pour gérer l'activation de l'input, il n'y avait aucune chance, par contre je suis troublé par le fait que le onchange ne fonctionne pas sur la checkbox, j'aurais encore appris quelque chose. :D

J'avais corrigé la fonction de moi meme... Telle qu'elle elle ne fonctionnait pas en effet.

Par contre j'ai encore des soucis ^^.

L'appel de la fonction avant ne change rien :(.
De plus je veux mettre 3 inputs en gris :
Code:

1 2 <input type="checkbox" value="1" onClick="disableElement('millier_exe','pnd_exe');" onClick="disableElement('centaine_exe','pnd_exe');" onClick="disableElement('decimale_exe','pnd_exe');" value="pnd_exe" name="pnd_exe" id="pnd_exe" <?php if($exe_price == pnd_exe || $exe_price == NULL) { echo 'checked="checked"'; } ?>/> PND
Ca fait bizarre et ca ne fonctionne pas. Seul le premier est grisé :(

19/06/2008, 16h31
Kyaan
il faut que tu crée une fonction tier que tu appel sur le click de la checkbox pour appeler disabledElement() 3 fois
Code:

1 2 3 4 5 6 function checkboxClick() { disableElement('millier_exe','pnd_exe'); disableElement('centaine_exe','pnd_exe'); disableElement('decimale_exe','pnd_exe'); }
et pour l'initialisation essai de le faire en pied de page je crois qu'il faut le faire après les balises à initialiser.
19/06/2008, 18h39
nickoeuh

Ca fonctionne à merveille.

Merci à vous deux, c'est extra !!!!
27/06/2008, 13h27
nickoeuh
Hello.

Je reviens à vous sur un problème important.
Après avoir mis en place ce petit script, le submit ne fonctionne plus.

Si j'enlève cette partie :
Code:

1 2 3 4 <script> checkboxClick(); checkboxClick2(); </script>
Ca refonctionne. Moi pas comprendre :(.
Si vous aviez une idée.

Merci.