Activer/Désactiver une liste déroulante

**Goupo** · 28/09/2009, 13h46

Bonjour,

Je rencontre des soucis pour activer et désactiver une liste déroulante (<select>).

J'ai cherché sur [ame="http://www.google.fr/search?hl=fr&q=jQuery+d%C3%A9sactiver+liste+d%C3%A9roulante&meta=lr%3Dlang_fr"]Google[/ame]... Ca ne donne pas grand chose.

Mon but est de désactiver la liste déroulante lorsque ma case (<input type='checkbox' ... />) est cochée et de la réactiver lorsque la case est décochée.

La case apparaît, par défaut, décochée.

La méthode que j'utilise est-elle la bonne?
Ce que je veux faire est-il possible?
Si oui, avez-vous des idées pour la réaliser?
Voyez vous des erreur?

Merci d'avance.

Voici ma liste déroulante :

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
<select id="codeType" name="codeType"  
        onchange="
         appelerPage(
          '#entree', 
          'php/controle/param_controle_entree.php', 
          {codeCtrl:'<?=$_POST['codeCtrl']?>', codeType:$('#codeType').val()}
         ); 
         appelerPage(
          '#sortie', 
          'php/controle/param_controle_sortie.php', 
          {codeCtrl:'<?=$_POST['codeCtrl']?>', codeType:$('#codeType').val()}
         ); 
         appelerPage(
          '#validation', 
          'php/controle/cmp_param_controle_validation.php', 
          {codeCtrl:'<?=$_POST['codeCtrl']?>', codeType:$('#codeType').val()}
         );"
       >
        <option></option><?
        for ($i=0; $i<sizeof($lesTypes); $i++) {?>
         <option value="<?=$lesTypes[$i]['codeType']?>"><?=$lesTypes[$i]['libType']?></option><?
        }?>
       </select>

Je délenche le script sur le clic de la case (onclick).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<input 
        type="checkbox" id="ctrlLie" name="ctrlLie" 
        onclick="
         if ($('#ctrlLie').attr('checked')) {
          alert('trace');
          appelerPage('#listeControles1','php/controle/cmp_param_controle_lie_lsctrl.php', {idSelect:'sousControle1'});
          $('#codeType').attr('disabled', 'disabled');
         } else {
          $('#listeControles1').empty();
          $('#listeControles2').empty();
          $('#codeType').removeAttr('disabled');
         }" 
       />

**Bovino** · 28/09/2009, 14h00

Code :

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

1
2
3
4
5
6
7
8
9
if ($(this).checked) {
    alert('trace');
    appelerPage('#listeControles1','php/controle/cmp_param_controle_lie_lsctrl.php', {idSelect:'sousControle1'});
}
else {
    $('#listeControles1').empty();
    $('#listeControles2').empty();
}
$('#codeType').disabled = $(this).checked;

**Goupo** · 28/09/2009, 14h10

Merci Bovino.

Ca à l'air correct, mais ça marche pas...

Voilà mon code, j'ai viré tout le code qui n'a pas à voir avec le problème (au cas où il y ait interférences) :

Code :

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

1
2
3
4
5
 
<input 
        type="checkbox" id="ctrlLie" name="ctrlLie" 
        onclick="$('#codeType').disabled = $(this).checked;" 
       />

**Goupo** · 28/09/2009, 14h41

Est-ce qu'il peut y avoir des incompatibilités liées au navigateur?

J'utilise FF3.0.5 pour les tests, et mon navigateur cible est ie6.

Ca ne marche sous aucun de ces navigateurs...

Lorsque je fais :

Code :

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

1
2
3
 
alert($(this).attr('checked'));
$('#codeType').disabled = $(this).attr('checked');

Il affiche bien true (cochée) ou false (décochée) mais ma liste ne se désactive pas...

**danielhagnoul** · 28/09/2009, 23h20

Bonsoir

Un exemple hors PHP :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }        
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
 
            $("#ctrlLie").change(function(){
                if ($(this).attr('checked')){
                    $('#codeType').attr('disabled', 'disabled');
                } else {
                    $('#codeType').attr('disabled', '');
                }
            });
 
        });        
    </script>
</head>
<body>
    <div id="conteneur">
        <select id="codeType" name="codeType" disabled="disabled">
            <option>Une option</option>
        </select>
 
        <input type="checkbox" id="ctrlLie" name="ctrlLie" checked="checked" />
 
        <div id="affiche"></div>
    </div>
</body>
</html>

EDIT :
Généralement IE ne fait rien comme les autres, ici aussi !

Avec IE le disabled donne l'impression qu'il ne fonctionne pas, mais si vous cliquez sur le select il affiche son état disabled ou non disabled.

J'ai essayé de rendre le focus au <select> avec focus() et select() mais rien à faire !

EDIT :

Ne me demandez pas pourquoi, mais en utilisant click() au lieu de change() il n'y a plus de problèmes avec IE :

Code :

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

1
2
3
4
5
6
7
8
 
            $("#ctrlLie").click(function(){
                if ($(this).attr('checked')){
                    $('#codeType').attr('disabled', 'disabled');
                } else {
                    $('#codeType').attr('disabled', '');
                }
            });

**Goupo** · 29/09/2009, 10h12

J'ai envie de dire qu'ie6 sucks mais la dernière fois que je l'ai dit on m'a répondu qu'on se foutait de savoir mon avis. Donc, je ne le dirai pas cette fois-ci... Oups, je l'ai dit.

Merci Bovino!

Merci Mister Hagnoul!

@+!

Activer/Désactiver une liste déroulante

jQuery

Vue hybride

Discussions similaires

Partager

Partager