formulaire : bloquer des zones

Version imprimable

30/01/2007, 10h24
Emcy

formulaire : bloquer des zones

bonjour,

j'ai un formulaire avec une case à cocher et 3 boutons radio

ce que je voudrais, c'est de bloqué l'accès aux boutons radio si la case à cochée est cochée => comment faire ?

Code:

1
2
3
4
5
6
7
<input type="checkbox" onclick="document.getElementById('radiobutton').style.display=(this.checked)?'none':'block'" />
 
<div id="radiobutton">
   <input type="radio" />
   <input type="radio" />
   <input type="radio" />
</div>

30/01/2007, 10h46
Emcy

merci,

mais je ne veux pas qu'ils disparaissent, je veux qu'ils deviennent inselectionnable...

de plus, la case est cochée par defaut => a l'affichage pour la premiere fois de la page ça ne bloque pas mes radio boutons...
30/01/2007, 10h48
Gruik

Code:

<input type="checkbox" onclick="document.getElementById('radiobutton').disabled = this.checked;" />
30/01/2007, 10h55
Bisûnûrs

Ben adapte le code, je t'ai montré la démarche. 8O

Tu as juste une boucle à faire sur les boutons radio présents dans le div radiobutton et de tous les basculer à disabled ...

Et pour tester au chargement de ta page tu mets le test également dans le onload du body.

ok merci

par contre j'aimerais faire une fonction CacheElement pour que ça soit plus simple à utiliser

j'ai essayé ça mais ça n'a pas l'air de marcher :
Code:

1 2 <label><input type="checkbox" name="toto" checked="checked" onclick="CacheElement('element1')" /> Mode Auto</label><br/>
Code:

1 2 3 4 5 function CacheElement(Nom) { alert(Nom); document.getElementById(Nom).style.display=(this.checked)?'none':'block'; }
PS : desolé, je suis une quiche en javascript...

Code:

1 2 3 4 5 6 7 8 function CacheElement(nom){ var boutons = document.getElementById(nom).getElementsByTagName('input'); for(var i = 0; i <= boutons.length-1; i++){ boutons[i].disabled = true; } }
Je ne l'ai pas testé et je l'ai ecrit vite fait, mais je pense qu'il devrait fonctionner, si on admet que la variable "nom" contient l'id du div qui contient les boutons radio.

Après il te reste juste à faire le test si la case est cochée ou non.

et comment fait-on pour savoir si la case est coché ?

j'ai testé ça mais ça ne marche pas :
Code:

1 2 3 4 5 6 7 8 9 function DisableElement(Nom) { var boutons = document.getElementById(Nom).getElementsByTagName('input'); for(var i = 0; i <= boutons.length-1; i++) { boutons[i].disabled = (this.checked)?'none':'block'; } }
=> j'ai pas compris a quoi correspond this ...

30/01/2007, 11h43
Bisûnûrs

Les valeurs de disabled sont true et false, pas none et block ..

J'avais utilisé this dans le HTML, cela signifiait "cet élément", dans ton code Javascript, ton this ne vaut rien.
30/01/2007, 11h49
Matthieu2000

Citation:

Envoyé par Emcy

merci,

mais je ne veux pas qu'ils disparaissent, je veux qu'ils deviennent inselectionnable...

remplace disabled par readonly

readonly ne fonctionne a priori pas (contrairement a disable)

actuellement ça fonctionne avec cette methode :
Code:

1 2 3 4 5 6 7 8 9 function DisableElement(Nom) { var boutons = document.getElementById(Nom).getElementsByTagName('input'); for(var i = 0; i <= boutons.length-1; i++) { boutons[i].disabled = document.Nomformulaire.NomCheckbox.checked; } }
=> le probleme est qu'il faut rentrer le nom de la checkbox a chaque fois (donc perte de l'utilité d'utiliser une fonction) : comment faire ?

30/01/2007, 11h57
E.Bzz

Citation:

Envoyé par Matthieu2000

remplace disabled par readonly

Y a emmêlage, là, non ?

A+
30/01/2007, 11h59
E.Bzz

Citation:

Envoyé par Bisûnûrs

J'avais utilisé this dans le HTML, cela signifiait "cet élément", dans ton code Javascript, ton this ne vaut rien.

Dans la fonction effectivement, mais si c'est le paramétre passé, tu récupères l'objet dans la fonction :

Code:

onQuelqueChose="DisableElement(this);"

A+
30/01/2007, 12h27
Emcy

merci, ça marche nickel

et merci pour votre rapidité...
30/01/2007, 13h33
Emcy
plutot que de juste grisé les radioboutons, j'aimerais griser tous les elements qu'il y a dans la div (du texte + des radio boutons)

j'ai fait cette fonction qui marche très bien sous IE7 mais pas sous firefox : que faire ?
Code:

1 2 3 4 5 function DisableElement(Nom, CheckBox) { var boutons = document.getElementById(Nom); boutons.disabled = CheckBox.checked; }
30/01/2007, 13h58
E.Bzz

Code:

var boutons = document.getElementById(ID);

Seul IE permet la confusion entre NAME et ID !!
30/01/2007, 14h04
Emcy

et je dois faire quoi alors...
30/01/2007, 14h16
E.Bzz

Donner un ID à ta checkbox et le passer en paramètre à la fonction (puisque c'est lui qui est attendu et non le name) ...

A+

il me semble que tu n'as pas bien compris mon probleme...

dans ma page j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="GLOBALConf">
							<p>
								Data Transfer Rate :<br/>
								<label><input type="radio" name="debit1" value="0" /> 10 Mbits/s</label><br/>
								<label><input type="radio" name="debit1" value="1" checked="checked" /> 100 Mbits/s</label>							
							</p>
 
							<p>
								Transmission Mode :<br/>
								<label><input type="radio" name="duplex1" value="0" /> Half-Duplex</label><br/>
								<label><input type="radio" name="duplex1" value="1" checked="checked" /> Full-Duplex</label>
							</p>
 
						</div>

lorsque je clic sur une checkbox, je lance le code suivant :

Code:

1
2
3
4
5
function DisableElement() 
			{
				var myZone = document.getElementById('GLOBALConf');
				myZone.disabled = true;							
			}

=> sous IE7, ça me grise ma zone mais pas sous firefox...

30/01/2007, 14h59
E.Bzz

Citation:

Envoyé par Emcy

il me semble que tu n'as pas bien compris mon probleme...

Ben c'est à dire : je fais avec ce que j'ai, à savoir ton code !

Si il change en off, je suis pas devin.
L'ID en dur est une mauvaise idée.

A+
30/01/2007, 15h19
Emcy

...j'ai fait un exemple simple pour que vous compreniez

le probleme est que lorsque je mets disable à true (c'est la le probleme) ça ne fait rien sous firefox : que dois-je faire ?
30/01/2007, 15h44
E.Bzz

Si le code donné correspond à celui que tu testes, il n'y a aucune raison.
Essaye toujours :

Code:

document.getElementById('GLOBALConf').setAttribute("disabled", "disabled");

A+
30/01/2007, 16h48
Emcy

ça fait exactement la meme chose :(
=> on dirait que firefox n'aime pas les disable sur un div..

une autre solution ?
30/01/2007, 16h52
Bisûnûrs

Disabled n'est pas un attribut d'un div ..

Cf : http://giminik.developpez.com/xhtml/div.html

Tu peux pour "simuler" cet état passer la couleur du background du div en gris.
30/01/2007, 16h59
E.Bzz

Citation:

Envoyé par Bisûnûrs

Disabled n'est pas un attribut d'un div ..

Effectivement, ce qui aurait été inquiétant c'es tque ça fonctionne :mrgreen:

Ceci dit, sur mon bete (++) IE 6, un disabled=true (et non disabled) sur un div disable effectivement les éléments qu'il contient.

A+
30/01/2007, 17h14
Emcy

Citation:

Envoyé par E.Bzz

Effectivement, ce qui aurait été inquiétant c'es tque ça fonctionne :mrgreen:

Ceci dit, sur mon bete (++) IE 6, un disabled=true (et non disabled) sur un div disable effectivement les éléments qu'il contient.

A+

le plus ding c'est qu'avec IE7, disabled=true et disabled=disabled fonctionne (avec setAttribute)... ???

j'aime pas trop la feinte de colorier => il va falloir colorier les elements puis desactiver les bouton radio, c'est quand meme lourd...
30/01/2007, 17h27
E.Bzz

Citation:

Envoyé par Emcy

le plus ding c'est qu'avec IE7, disabled=true et disabled=disabled fonctionne (avec setAttribute)... ???

Règle de base : ne JAMAIS se baser sur IE pour établir/vérifier une norme.

Le W3C est là pour ça (mais IE doit pas connaitre).

Ceci dir, ça explique pas ton pb :aie:

A+

Vu qu'avec ce code, on peut mettre disable les radio boutons, n'y a t-il pas une methode pour balayer tous les elements du div est les mettre disable (au lieu de ne balayer que les radio bouton) ?
Code:

1 2 3 4 5 6 7 8 9 function DisableElement(NomDiv, CheckBox) { var boutons= document.getElementById(NomDiv).getElementsByTagName('input'); for(var i = 0; i <= boutons.length-1; i++) { boutons[i].disabled = CheckBox.checked; } }
=> j'ai essayé de changer 'input' par 'p' mais ça ne marche toujours pas sous Firefox (mais ça marche sous IE7)

Fuseau horaire GMT +2. Il est actuellement 10h25.