Grisé un bouton si je clique sur un autre

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 !!

@+

Salut,

Tu peut faire comme ça :

Code:

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

Merci Beaucoup amoiraud !!

Cela fonctionne bien :)

:salut:

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:

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>

Salut !! :D
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 !!