Griser ou masquer une liste déroulante

Version imprimable

Bonjour, bonsoir à toute.

J'ai une page HTML PHP nommée choix.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Choix du type d'ordinateur</title>
    </head>
    </head>
    <body>
 
	<h3 id="ordinateurs">Choisir l'ordinateur à affecter :</h3>
 
	<form id="frmOrdi" name="frmOrdi" action="?page=lieu" method="post">
 
	<INPUT type= "radio" name="choix" value="utilisateur" onclick="verifListe()"/><label>Affecter selon l'utilisateur</label><br/>
    <INPUT type= "radio" name="choix" value="ordinateur" onclick="verifListe()"/><label>Affecter selon l'ordinateur</label><br/>
 
	<a>Choisir l'ordinateur à affecter :</a>
	<SELECT name="listeOrdi">
	<?php
	for($i = 0; $i < count($ordinateurs); $i++)
	{
		echo "<option>".$ordinateurs[$i]."</option>";
	}
	?>
	</select>
	<a>Ou alors, choisir l'utilisateur à affecter :</a>
	<SELECT name="listeUtilisateurs">
	<?php
	for($i = 0; $i < count($users); $i++)
	{
		echo "<option>".utf8_encode($users[$i])."</option>";
	}
	?>
	</select>
	<br/>
	<input type="submit" value="Valider" onclick="self.location.href='?page=lieu'")>
	<input type="button" value="Retour" onclick="self.location.href='?page=home'")>	
	</form>
 
	<script type="text/javascript" src="../include/script.js"></script>
    </body>
</html>

Et j'ai un script JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
function verifListe()
{
    if(document.forms["frmTypePC"]["choix"].value == "utilisateur")
    {
		window.document.getElementById['listeUtilisateurs'].disabled=true;
	}
	else
	{
		window.document.getElementById['listeOrdi'].disabled=true;
	}
}

J'aimerai qu'en fonction de mon choix de la checkbox soit Utilisateur, soit Ordinateur, la liste correspondante soit accessible et l'autre soit griser. Le problème ? Après maintes et maintes tentatives, je n'y arrive toujours pas...

Merci d'avance pour votre aide.

Plusieurs choses :

Ton formulaire ne s'appelle pas "frmTypePC" mais "frmOrdi"
Tu fais une recherche de tes select par getElementById alors qu'ils n'ont pas d'id mais un name : attribue des ids à tes contrôles select

Tu implémentes mal getElementById :
D'abord c'est une méthode, pas un tableau : il faut utiliser des parenthèses à la place des crochets
Ensuite pour modifier une valeur d'attribut comme disabled, il faut utilise la méthode setAttribute :
Code:

1 2 document.getElementById('listeUtilisateurs').setAttribute('disabled', 'disabled');
Quand tu désactive un contrôle select il faut réactiver l'autre pour ça il faut utiliser removeAttribute :
Code:

1 2 document.getElementById('listeOrdi').removeAttribute('disabled');
Si je résume :
Code:

1 2 3 4 5 6 7 8 9 10 11 if(document.forms["frmTypePC"]["choix"].value == "utilisateur") { document.getElementById('listeUtilisateurs').setAttribute('disabled', 'disabled'); document.getElementById('listeOrdi').removeAttribute('disabled'); } else { document.getElementById('listeOrdi').setAttribute('disabled', 'disabled'); document.getElementById('listeUtilisateurs').removeAttribute('disabled'); }
Ca devrait aller mieux ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function verifListe()
{
    if(document.forms["frmTypePC"]["choix"].value == "utilisateur")
    {
		document.getElementById('listeUtilisateurs').setAttribute('disabled', 'disabled');
		document.getElementById('listeOrdi').removeAttribute('disabled');
	}
	else
	{
		document.getElementById('listeOrdi').setAttribute('disabled', 'disabled');
		document.getElementById('listeUtilisateurs').removeAttribute('disabled');
	}
}

MA PAGE :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	<form id="frmOrdi" name="frmOrdi" action="?page=lieu" method="post">
 
	<INPUT type= "radio" name="choix" value="utilisateur" onclick="verifListe()"/><label>Affecter selon l'utilisateur</label><br/>
    <INPUT type= "radio" name="choix" value="ordinateur" onclick="verifListe()"/><label>Affecter selon l'ordinateur</label><br/>
 
	<a>Choisir l'ordinateur à affecter :</a>
	<SELECT id="listeOrdi" name="listeOrdi">
	<?php
	for($i = 0; $i < count($ordinateurs); $i++)
	{
		echo "<option>".$ordinateurs[$i]."</option>";
	}
	?>
	</select>
	<a>Ou alors, choisir l'utilisateur à affecter :</a>
	<SELECT id="listeUtilisateurs" name="listeUtilisateurs">
	<?php
	for($i = 0; $i < count($users); $i++)
	{
		echo "<option>".utf8_encode($users[$i])."</option>";
	}
	?>
	</select>
	<br/>
	<input type="submit" value="Valider" onclick="self.location.href='?page=lieu'")>
	<input type="button" value="Retour" onclick="self.location.href='?page=home'")>	
	</form>

Ca ne marche toujours pas. Je ne veux pas passer par un bouton. Le onclick marche dans le bouton ?

Code:

1
2
3
4
<form id="frmOrdi" name="frmOrdi" action="?page=lieu" method="post">
...
if(document.forms["frmTypePC"]["choix"].value == "utilisateur")

Ton formulaire n'a toujours pas le bon nom...

Je me suis trompé de copié/coller sur le forum, j'ai bien modifié.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function verifListe()
{
    if(document.forms["frmOrdi"]["choix"].value == "utilisateur")
    {
		document.getElementById('listeUtilisateurs').setAttribute('disabled', 'disabled');
		document.getElementById('listeOrdi').removeAttribute('disabled');
	}
	else
	{
		document.getElementById('listeOrdi').setAttribute('disabled', 'disabled');
		document.getElementById('listeUtilisateurs').removeAttribute('disabled');
	}
}

Et toujours pas efficace.

Par contre, j'y suis passé avec du CSS et des DIV. Merci quand même !!