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

**nickoeuh** · 19/06/2008, 10h17

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.

**tusssss** · 19/06/2008, 10h29

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....

**tusssss** · 19/06/2008, 10h35

Ç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 :

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

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

**nickoeuh** · 19/06/2008, 11h11

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 :

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

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

**tusssss** · 19/06/2008, 11h18

Il faut que tu places ton javascript dans une fonction comme par exemple comme ceci :

Code :

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

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 :

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

1
2
 
onchange="DesactiverZoneTexte();"

Ca devrait fonctionner après ca.

Bon courage

**nickoeuh** · 19/06/2008, 11h30

Ca ne fonctionne toujours pas

**tusssss** · 19/06/2008, 11h33

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?

**tusssss** · 19/06/2008, 11h35

Remplaces ça :

Code :

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

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

par

Code :

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

document.getElementById('pnd_exe').checked

**nickoeuh** · 19/06/2008, 11h45

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

Mon formulaire:

Code :

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

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 ?

**tusssss** · 19/06/2008, 11h53

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.

**nickoeuh** · 19/06/2008, 11h55

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

Le mélange PHP & JS n'est pas conseillé ?

**tusssss** · 19/06/2008, 12h03

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...

**nickoeuh** · 19/06/2008, 12h11

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.

**tusssss** · 19/06/2008, 12h16

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

**Kyaan** · 19/06/2008, 12h16

Voilà la fonction javascript qu'il faut utiliser:

Code :

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

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 :

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

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

**nickoeuh** · 19/06/2008, 12h32

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.

**tusssss** · 19/06/2008, 13h35

Envoyé par Kyaan

Voilà la fonction javascript qu'il faut utiliser:

Code :

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

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 :

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

<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...

**Kyaan** · 19/06/2008, 13h58

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.

**tusssss** · 19/06/2008, 14h05

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.

**nickoeuh** · 19/06/2008, 14h26

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 :

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

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é

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

JavaScript

Discussions similaires

Partager

Partager