Grisé un bouton si je clique sur un autre

**TonioHac** · 28/07/2017, 11h57

Bonjour à tous,

Je suis actuellement entrain de créer un formulaire en HTML.

j'ai également un controller et en JS et enfin un CSS.

A la fin de mon formulaire j'ai deux boutons

et je voudrais faire une condition que si l’utilisateur clique sur le bouton A, le bouton B se grise et deviens in-cliquable

je recherche comment faire la condition en JS

je vous remercie d’avance !!

@+

**amoiraud** · 28/07/2017, 12h05

Salut,

Tu peut faire comme ça :

Code html :

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

1
2
<input type="button" id="btnA" onClick="document.getElementById('btnB').disabled = 'disabled'" value="Bouton A" />
<input type="button" id="btnB" value="Bouton B" />

**TonioHac** · 28/07/2017, 14h13

Merci Beaucoup amoiraud !!

Cela fonctionne bien

**danielhagnoul** · 28/07/2017, 15h22

La solution n'est pas bonne si :

l'on doit pouvoir cliquer en premier aussi bien sur B que sur A
l'on doit écrire du code pour gérer le "disabled" mais aussi l'action prévue en cas de clic sur le bouton

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
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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                button {
                        font-size: 3rem;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        const
                                elemBtnA = document.querySelector( "#btnA" ),
                                elemBtnB = document.querySelector( "#btnB" ),
                                btnHandler = ev => {
                                        switch( ev.target.id ){
                                                case "btnA" :
                                                        elemBtnB.setAttribute( "disabled", true );
                                                        
                                                        // votre code si clic sur A
                                                        console.log( "clic sur A" );
                                                        
                                                        break;
                                                case "btnB" :
                                                        elemBtnA.setAttribute( "disabled", true );
                                                        
                                                        // votre code si clic sur B
                                                        console.log( "clic sur B" );
                                                        
                                                        break;
                                                default :
                                                        console.error( "click sur inconnu" );
                                        }
                                };
                        
                                elemBtnA.addEventListener( "click", btnHandler, false );
                                elemBtnB.addEventListener( "click", btnHandler, false );                                
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<button id="btnA">A</button>
		<button id="btnB">B</button>
 
	</main>
</body>
</html>

**TonioHac** · 28/07/2017, 15h27

Salut !!

en effet danielhagnoul, ton code est beaucoup plus complet et fonctionne dans les deux cas soit "A" ou "B".

De plus je peux également cliquer plusieurs fois sur le même bouton pour faire une action diverse.

je te remercie !!

Grisé un bouton si je clique sur un autre

JavaScript

Discussions similaires

Partager

Partager