disable et enable un select en cliquant dessus

**kitten13** · 21/10/2009, 12h14

Bonjour,

dans un formulaire contenant deux select j'ai besoin de créer une fonction en js pour désactiver un select sur deux, (en gros empêcher l'utilisation des deux select en même temps).

Donc si un select est utilisé l'autre se désactive et réactiver celui-ci en cliquant dessus et vis vers ça.

Pour illustré ma question voici un site --http://www.liligo.fr/homepage/buzz.jsp, donc ce site utilise des checkbox mais ça fonctionne en cliquant seulement sur le select désactiver pour le réactiver.

Pour l'instant j'ai creer mais deux fonctions pr desactiver le select mais je ne sais pas comment reactiver le select desactiver.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html> 
<body> 
<script language="JavaScript"> 
<!-- 
 
function disablenable(cible) 
{ 
	if(document.forms['frm'].elements[cible].disabled == false) 
	{ 
		document.forms['frm'].elements[cible].disabled=true; 
	} 
	else 
	{ 
		document.forms['frm'].elements[cible].disabled=false; 
	}	 
} 
--> 
</script> 
 
<form name="frm"> 
 
<select name="select1" onChange="disablenable('select2')"> 
<option value="">selectionner</option> 
<option value="Detail">Detail</option> 
<option value="Summary">Summary</option> 
</select> 
 
<br><br> 
 
<select name="select2" onChange="disablenable('select1')"> 
<option value="">selectionner</option> 
<option value="1">one</option> 
<option value="2">two</option> 
</select> 
 
</form> 
 
</body> 
</html>

merci d'avance pour pour votre aide.

**SpaceFrog** · 21/10/2009, 16h17

Ayant resolu ce sujet sur la chat je vous apporte ici la solution...
En regardant bein le site en question je me suis aperçu que curieusement les fèches à droite des select (pour le deroulement) n'étaient pas grisées ...
ce qui m'a mis la puce à l'oreille, il ne sont pas vraiment disabled !!!
Il suffit de jouer sur leur style :

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
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
runs=0
var future=0;
var prev=1;
 
 
function launch(){
for (i=1;i<4;i++){
	document.getElementById('select'+i).className=(future==i)?'enabled':'disabled';
	document.getElementById('select'+i).parentNode.className=(future==i)?'left enabled':'left disabled';
	if(future!=i){document.getElementById('select'+i).selectedIndex=-1;}
	 }
	if(arguments.length==1){ document.getElementById('sel'+future).checked='true';}
 
 }
 
 
function fut(t){future=t;
                 }
 
function stopsel(){
var AllLis=document.getElementsByTagName('label');
for(j=0;AllLis[j];j++){
      AllLis[j].onclick=function(evt){
			  		evt=(evt)?evt:window.event;
			  		if (evt.stopPropagation) {evt.stopPropagation();}
					else{evt.cancelBubble = true;}
 
					}
		}
}
</script>
 
<style type='text/css'>
 
div {width:auto;
       }
.left {float:left;}   
.disabled {background-color:silver;
          color:gray;}  
.enabled {background-color:white;
          color:black;}
   </style>
</head>
 
<body >
<div onmouseover="fut(1)"  class='left enabled' style='border:0'>
<input type='radio' name='toggle' id="sel1" checked class='left' onclick="launch()" onfocus='this.blur()'/>
	<select id="select1" class='enabled' onmousedown="launch(1);" >
			<option value='-1'></option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>			
		</select>
</div>		
 
<div  onmouseover="fut(2)"  class='left disabled' style='border:0'>
<input type='radio' name='toggle' id="sel2" class='left' onclick="launch()" onfocus='this.blur()'/>
	<select id="select2" class='disabled' onmousedown="launch(1);" >
			<option value='-1'></option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>		
			<option>mlkmlk</option>			
		</select>
 
</div>
 
<div  onmouseover="fut(3)"  class='left disabled' style='border:0'>
<input type='radio' name='toggle' id="sel3"   class='left' onclick="launch()" onfocus='this.blur()'/>
 
	<select id="select3" class='disabled' onmousedown="launch(1);" >
			<option value='-1'></option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>
			<option>mlkmlk</option>			
		</select>&nbsp;
 
</div>
 
<input id='res' value='' type='text' />
 
 
</body>
 
</html>

**kitten13** · 21/10/2009, 18h24

Merci à toi space...

disable et enable un select en cliquant dessus

JavaScript

Discussions similaires

Partager

Partager