Bouton 1 qui entraine une action sur le bouton 2

Bonjour à tous, j'ai actuellement un petit script qui permet

- de passer l'état d'un bouton (appelons le bouton 1) de OUI à NON et de NON à OUI (cela fonctionne)
- de passer l'état d'un autre bouton (appelons le bouton 2) de OUI à NON et de NON à OUI (cela fonctionne)
Je souhaiterai aller plus loin, en faisant en sorte que si bouton 1 est à NON, alors le bouton 2 devient lui aussi à NON et devient alors grisé.

Le problème, c'est que je n'y connais vraiment rien en javascript, alors j'ai créé un jsfiddle et j'essaie de m'en sortir mais je vais avoir besoin d'aide.
https://jsfiddle.net/imadeus/1fjjrLnf/10/

Alors je suis encore loin du compte mais bon ca avance un peu. On peut s'apercevoir qu'il y a bien une action entre les boutons mais qu'elle n'est pas bonne et pas constante.

Il faudrait qu'une fois le bouton 1 sur OFF que le bouton 2 passe d'office sur OFF et que la zone ON-OFF se grise pour qu'on ne puisse pas faire de choix.
Autre problème : les id dans l'exemple sont identique pour que cela marche mais au final, les id doivent être différentes. J'ai testé également un visibily hidden sur l'id mais sans succès :(

Merci à tout ceux qui voudront m'aider

Salut,

je t’invite à utiliser l’inspecteur HTML de ton navigateur (clic droit > « inspecter / examiner l’élément ») pour te rendre compte de la structure de tes boutons. Tu ne pourras pas les garder fonctionnels si tu appliques un visibility: hidden dessus.

Ce code CSS est prévu pour fonctionner sans JavaScript. Il repose sur des boutons radio invisibles (la règle .switch-input { display: none; }) et leur état checked pour déterminer le style des éléments voisins, c’est-à-dire les labels (textes « oui » et « non ») et le span (le bloc coloré qui glisse). Au moyen de l’inspecteur tu peux désactiver ce display: none pour bien voir comment se comportent les boutons radio; note également l’importance des labels : quand on clique sur un label, le clic est « reporté » sur le bouton invisible correspondant.

Actuellement ton code ne marche pas car il y a des espaces dans les noms de tes attributs onclick. Ils sont simplement ignorés, ta fonction toggle n’est jamais appelée. Si tu observes une interaction entre tes deux composants, c’est pour une toute autre raison : les 4 boutons radio sous-jacents ont le même name ! Avec le display: none désactivé tu te rendras bien compte du problème. Les boutons « oui » et « non » du même composant doivent avoir le même name, mais doivent avoir un name différent de ceux de l’autre composant.

Pour être plus clair :

• « oui » → "societe1"
• « non » → "societe1"

• « oui » → "societe2"
• « non » → "societe2"

Comme je l’ai dit, c’est une mauvaise idée de vouloir appliquer des styles supplémentaires via script, ils risqueraient d’entrer en conflit avec les styles existants qui fonctionnent en quelques sortes en circuit fermé. L’astuce est d’agir directement sur les boutons en modifiant leur état checked. Ensuite tu pourras t’occuper de les mettre en disabled (oui, il y a un « d » à la fin). Mais d’abord, répare tes attributs onclick ;)

Edit : il faudra que tu rajoutes des styles pour les input :disabled, de la même façon qu’avec :checked, car sinon, les « vrais » boutons étant masqués, l’utilisateur ne verra pas que le contrôle est désactivé.

Merci Watilin pour ta réponse.

En effet, je n'avais pas vu cela sous cet angle.
J'ai donc créé un css pour l'état disabled mais ce que je ne comprends pas, c'est que j'ai l'impression que je ne rentre pas dans la fonction toogle.
Je n'arrive pas à faire en sorte que le disabled (mis par défaut maintenant) s'enlève.

https://jsfiddle.net/1fjjrLnf/19/

Merci d'avance pour toute aide :).

C’est disabled avec un d, en JS aussi.

Oui, la correction a été faite. En ai-je oublié ?

Edit : ok une fois online, il semble que ce soit ok. J'ai surement oublié de cocher un truc dans la case javascript du site fiddle.