[Jquery] Bouton Radio et input disable

**lifty** · 27/07/2009, 15h19

Bonjour,

Je viens encore une fois vous voir pour un ... petit soucis de JS

.

Présentation:

J'ai plusieurs bouton radios appartenant au même groupe (même attribut name), à chacun de ces bouton radios est normalement lié des champs de saisie (liste ou champ texte).
Si un bouton radio est coché alors seulement les champs et les valeurs associés à ce bouton radio sont pris en compte dans le formulaire.

Le soucis
Comme expliqué ci dessus seul les champs dont le bouton radio associé à été sélectionné sont pris en compte, seulement les autres champs étant en saisie libre, cela peut perturber l'utilisateur qui pensait pouvoir remplir plusieurs champs correspondant à plusieurs boutons radio.

Je souhaiterais donc rendre les champs de saisie associé au bouton modifiables, et les champs associés aux autres boutons non modifiables.

Malgré mes efforts je n'arrive pas à faire en sorte que tous les champs non associé au bouton radio sélectionné soit passé en "disabled=disabled".

Le Code

Un exemple de la structure de mon code

Code html :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
 
 
  <form>
      <input id="1" type="radio" name="toto" value="0"/>  <input name="tutu1" type = "text" /><select name = "titi1" value="0"><option>Tata1</option></select>
      <input id="2" type="radio" name="toto" value="1"/>  <input name="tutu2" type = "text" /><select name = "titi2" value="0"><option>Tata2</option></select>
      <input id="3" type="radio" name="toto" value="2"/>  <input name="tutu3" type = "text" /><select name = "titi3" value="0"><option>Tata3</option></select>
      <input id="4" type="radio" name="toto" value="3"/>  <input name="tutu4" type = "text" /><select name = "titi4" value="0"><option>Tata4</option></select>
      <input id="5" type="radio" name="toto" value="4"/>  <input name="tutu5" type = "text" /><select name = "titi5" value="0"><option>Tata5</option></select>
      <input id="6" type="radio" name="toto" value="5"/>  <input name="tutu6" type = "text" /><select name = "titi6" value="0"><option>Tata6</option></select>
  </form>
  </body>
</html>

Ce que je souhaite

Une jolie bimbo, une jolie voiture, une jolie maison, beaucoup d'argent ....

bon ça c'est pour plus tard.

Ce dont j'ai besoin

De savoir quel event associé aux bouton radio afin que lorsqu'un des boutons est sélectionné un script change la value disabled des champs des autres boutons radio.

Code :

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

$('#idChamp).attr('disable','disable');

Comment faire savoir à un bouton quels champs lui sont associés.

Et si vous avez ça en stock un petit exemple de script qui fait un effet similaire.

Conclusion

Le problème est de lancé une vérification sur tous les champs associés à un bouton, et si ce bouton n'est pas 'checked' alors ces champs sont passé en 'disabled'.

Merci à vous !

**danielhagnoul** · 27/07/2009, 21h49

Bonsoir lifty.

La gestion des parties à cacher/montrer n'est pas aussi triviale qu'on aurait pu le penser au premier abord, un exemple :

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
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!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;
        }
        span.cache {
            visibility:hidden;
        }
        span.montre {
            visibility:visible;
        }
    </style>
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function(){
            $("input:radio[name='toto']").click(function(){
 
                $("#maform span.montre").removeClass("montre").addClass("cache");
 
                $(this).parent().next().removeClass("cache").addClass("montre");
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <form id="maform">
            <label><input id="1" type="radio" checked="checked" name="toto" value="0"/>toto1</label>
            <span class="montre">
                <input name="tutu1" type="text" />
                <select name="titi1" value="0">
                    <option>Tata1</option>
                </select>
            </span>
            <br />
            <label><input id="2" type="radio" name="toto" value="1"/>toto2</label>
            <span class="cache">
                <input name="tutu2" type="text" />
                <select name="titi2" value="0">
                    <option>Tata2</option>
                </select>
            </span>
            <br />
            <label><input id="3" type="radio" name="toto" value="2"/>toto3</label>
            <span class="cache">
                <input name="tutu3" type="text" />
                <select name="titi3" value="0">
                    <option>Tata3</option>
                </select>
            </span>
            <br />
            <label><input id="4" type="radio" name="toto" value="3"/>toto4</label>
            <span class="cache">
                <input name="tutu4" type="text" />
                <select name="titi4" value="0">
                    <option>Tata4</option>
                </select>
            </span>
            <br />
            <label><input id="5" type="radio" name="toto" value="4"/>toto5</label>
            <span class="cache">
                <input name="tutu5" type="text" />
                <select name="titi5" value="0">
                    <option>Tata5</option>
                </select>
            </span>
            <br />
            <label><input id="6" type="radio" name="toto" value="5"/>toto6</label>
            <span class="cache">
                <input name="tutu6" type="text" />
                <select name="titi6" value="0">
                    <option>Tata6</option>
                </select>
            </span>
        </form>
    </div>
</body>
</html>

[Jquery] Bouton Radio et input disable

jQuery

Vue hybride

Discussions similaires

Partager

Partager