desactiver champs avec checkbox

Sujet résolu

Anonyme

3 novembre 2010 à 17:00:17

Bonjour, je ne sait pas coder en Javascript donc je vient demander de l'aide, j'ai juste un petit truc à faire avec, et ca m'embêterais d'apprendre le Javascript juste pour ca

j'ai un formulaire pour bannir des membres.
si on le banni à vie (click sur la checkbox id:ban_definitif), je veut que le champ pour choisir la durée du bannissement soit désactivé(id:date_ban). Désactiver et non cacher.

<h3>Bannir un membre :</h3>
            <form method="post" action="./check_bannissement.php">
                <p>
                    <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" /><br />
                    <label for="motif_ban">Motif :</label><br />
                    <textarea cols="50" rows="5" name="motif_ban" id="motif_ban"></textarea> <br />
                    <label for="ban_definitif">Ban definitif ?</label> <input type="checkbox" name="ban_definitif" id="ban_definitif" /><br />
                </p>
                <p>
                    <label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban" /><br />
                </p>
                <p>
                    <input type="submit" name="bannissement" id="bannissement" value="Bannir ce membre" />
                </p>
            </form>

pouvez vous m'indiquer comment faire cela s'il vous plaît ? Je vous remercie d'avance.

Tillertan

3 novembre 2010 à 17:04:19

http://forum.alsacreations.com/topic-5 [...] .html#p238338

Tu remplaces les .style.display par des .disabled, les "none" par des false, et les "block" par des true

Anonyme

3 novembre 2010 à 17:31:18

Bonjour, merci pour votre aide, ca ne marche pas quand je clique sur la checkbox ca ne me désactive pas le champ.
J'ai du rater quelque chose mais je ne voit pas quoi.

<script>
function checkBoxFunction (checkBoxID) {
	var baliseChoix = document.getElementById(checkBoxID);
	if (baliseChoix.disabled == "false") {
		baliseChoix.disabled = "true"; 
	}
	else {
		baliseChoix.disabled = "false";
	}
}
</script>
			
            <form method="post" action="./check_bannissement.php">
                <p>
                    <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" /><br />
                    <label for="motif_ban">Motif :</label><br />
                    <textarea cols="50" rows="5" name="motif_ban" id="motif_ban"></textarea> <br />
                    <label for="ban_definitif">Ban definitif ?</label> <input type="checkbox" name="ban_definitif" id="ban_definitif" onClick="javascript:checkBoxFunction('desactiveDuree')" /><br />
                </p>
				<div id="desactiveDuree" style="display:false;">
                <p>
                    <label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban" /><br />
                </p>
				</div>
                <p>
                    <input type="submit" name="bannissement" id="bannissement" value="Bannir ce membre" />
                </p>
            </form>

Merci encore

lieo

3 novembre 2010 à 17:42:03

T'as mal compris le principe, dans ton code lorsque tu clique sur l'input type radio, t'essaye de cocher/ décocher un div, conclusion normal que sa marche pas

.
Display: "none"; /"inline"; sert à afficher caché le div en premier lieu.
Ensuite lorsque tu clique ce que tu veux c'est disabled les champs dans le div (et non pas le div).
Donc tu récupère l'id date_ban que tu veux griser, et tu le met en disabled true.

Anonyme

3 novembre 2010 à 17:57:24

Merci ca marche, je pense avoir fait celà comme il faut :

<script>
function checkBoxFunction (checkBoxID) {
	var baliseChoix = document.getElementById(checkBoxID);
	if (baliseChoix.disabled == "false") {
		baliseChoix.disabled = "true"; 
	}
	else {
		baliseChoix.disabled = "false";
	}
}
</script>
			
            <form method="post" action="./check_bannissement.php">
                <p>
                    <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" /><br />
                    <label for="motif_ban">Motif :</label><br />
                    <textarea cols="50" rows="5" name="motif_ban" id="motif_ban"></textarea> <br />
                    <label for="ban_definitif">Ban definitif ?</label> <input type="checkbox" name="ban_definitif" id="ban_definitif" onClick="javascript:checkBoxFunction('date_ban')" /><br />
                </p>
                <p>
                    <label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban" style="display:false;"/><br />
                </p>
                <p>
                    <input type="submit" name="bannissement" id="bannissement" value="Bannir ce membre" />
                </p>
            </form>

Es-ce correct ? Est il utile de mettre style="display:false;" sur le champs à cacher ? car même sans ca marche.

EDIT : quand je re clique sur la checkbox, le champs reste grisé.. :/ je voudrais plutôt qu'il re apparaisse..

lieo

3 novembre 2010 à 18:03:41

Comme j'ai dis "display" permet juste de caché l'affichage, et comme tu dis :

Citation

Désactiver et non cacher

Donc si tu veux désactiver utilise que disabled, si tu veux caché, utilise display.

Sinon petite mise en garde, ce genre de désactivation Javascript n'est absolument pas sécurisé, il est (très) simple de supprimer un disabled

(même si dans ton cas sa importe peu).

Anonyme

3 novembre 2010 à 18:11:09

Ok merci, donc je peut faire comme ceci :
<label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban" style="diabled:false;"/><br /> ?

Question sécurité ce n'est pas très très grave, c'est dans la partie admin, donc seul les admins l'utilise (moi, et deux amis) donc pas de souci.
Derrière tout ça, j'ai PHP qui vérifie si la checkbock à été activé et que la date est donnée = erreur.
Mais je voulais juste un petit plus a l'affichage avec Javascript, pour être plus sûr d'éviter les erreurs.

(ps: J'ai éditer mon post précédent lorsque vous étiez en train d'écrire le votre).

lieo

3 novembre 2010 à 18:20:25

check.disabled = false;// décoche la case
check.disabled = true;// la coche

(Oui je me doutais que c'était pour l'administration, d'où mon "même si dans ton cas sa importe peu").
Ps: si tu veux que dès le début elle ne soit pas grisé tu met rien, si tu veux qu'elle soit grisé tu met disabled="" et sa suffira.
Ps2: par "coche" / "décoche" c'est grisé / non grisé

Anonyme

3 novembre 2010 à 18:44:15

D'accord jusque la ca va.
Quand je clique sur la checkbox, ça grise le champ (niquel), mais quand je re clique dessus ca ne revient pas normal je suis obliger de recharger la page :/
Il faut rajouter du javascript ?

ma page actuelle :

<script>
function checkBoxFunction (checkBoxID) {
	var baliseChoix = document.getElementById(checkBoxID);
	if (baliseChoix.disabled == "false") {
		baliseChoix.disabled = "true"; 
	}
	else {
		baliseChoix.disabled = "false";
	}
}
</script>
			
            <form method="post" action="./check_bannissement.php">
                <p>
                    <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" /><br />
                    <label for="motif_ban">Motif :</label><br />
                    <textarea cols="50" rows="5" name="motif_ban" id="motif_ban"></textarea> <br />
                    <label for="ban_definitif">Ban definitif ?</label> <input type="checkbox" name="ban_definitif" id="ban_definitif" onClick="javascript:checkBoxFunction('date_ban')" /><br />
                </p>
                <p>
                    <label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban"/><br />
                </p>
                <p>
                    <input type="submit" name="bannissement" id="bannissement" value="Bannir ce membre" />
                </p>
            </form>

Tillertan

3 novembre 2010 à 18:54:59

<script>
function checkBoxFunction (checkBoxID, el) {
    document.getElementById(checkBoxID).disabled = el.checked;
}
</script>
            
            <form method="post" action="./check_bannissement.php">
                <p>
                    <label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" /><br />
                    <label for="motif_ban">Motif :</label><br />
                    <textarea cols="50" rows="5" name="motif_ban" id="motif_ban"></textarea> <br />
                    <label for="ban_definitif">Ban definitif ?</label> <input type="checkbox" name="ban_definitif" id="ban_definitif" onclick="checkBoxFunction('date_ban', this);" /><br />
                </p>
                <p>
                    <label for="date_ban">Jusqu'au :</label> <input type="text" name="date_ban" id="date_ban"/><br />
                </p>
                <p>
                    <input type="submit" name="bannissement" id="bannissement" value="Bannir ce membre" />
                </p>
            </form>

lieo

3 novembre 2010 à 18:58:30

Grillé, mais je corrige quand même ton code :

function checkBoxFunction (checkBoxID) {
	var baliseChoix = document.getElementById(checkBoxID);

	if (baliseChoix.disabled == false) {
		baliseChoix.disabled = true; 
	}
	else {
		baliseChoix.disabled = false;
	}
}

Dans ton cas true et false sont pas des chaînes de caractères mais des valeurs

Anonyme

3 novembre 2010 à 19:03:01

Merci lieo pour la fonction corriger ca marche comme je le voulais

Merci aussi à toi Tiller pour une version plus courte de la fonction en javascript

Je passe en résolu. Bonne soirée