Bonjours, j'ai une check box acompagné d'un label avec un bouton pour envoyé sur la suite du formulaire :

    <div class="accepter">
                    <!-- une checkbox pour accepter la charte -->
                    <div class="form-check">
                        <input id="btnCharte" class="form-check-input d-none" type="checkbox" name="accepter" id="accepter" value="1">
                        <label class="labelCharte form-check-label bloqueCharte" for="accepter">lire jusqu'a la fin pour accepter</label>
                        <label id="labelcharteAccepté" class="labelCharte form-check-label d-none debloqueCharte" for="accepter">J'accepte la charte</label>
                    </div>
                </div>
                </div>
                <!-- le bouton pour revenir à la 1ere partie -->
                <button type="button" id="btnPartie1" class="btn btn-primary">Retour</button>
                <!-- le bouton pour passer à la 3eme partie doit verifier que la charte est acceptée -->
                <button type="button" id="btnPartie3" class="btn btn-primary ">Suivant</button>

je veux que le bouton suivant soit désactivé quand la case est coché et qu'il soit activé quand la case est découché, pour ca en js j'ajoute se code :

btnCharte.addEventListener('change', () => {
    if (btnCharte.checked) {
        btnPartie3.classList.remove('disabled');
    } else {
        btnPartie3.classList.add('disabled');
    }
}
);

il fonctionne bien quand je clique sur la checkBox le bouton se désactive et se réactive, cependant j'ai aussi ajouté le fait qu'on puisse check ou pas la checkBox en cliquant sur le texte à coté (pour facilité l'usage) avec se code js :

//si le texte de la charte est cliqué on coche la checkbox (pour les personnes qui ne savent pas cliquer sur une checkbox)
labelCharte.addEventListener('click', () => {
    btnCharte.checked = !btnCharte.checked;
});

mais donc quand je clique sur le texte pour check la checkBox ca le fait bien mais ca active pas le bouton à coté, comment je pourais régler le problème?
(je pourais ajouté un ecouté sur le texte qui active et désactive le bouton en cas de clique sur le texte mais ca ferait 2 ecoute pour la même chose et je pense que se n'est pas trés propre, exist-il un moyen de le faire autrement?)
merci d'avance pour vos réponses (et désolé pour les fautes)

Salut

Normalement, il n'y a pas besoin d'écouter le clic sur le label, parce que celui-ci devrait faire en sorte que la case à cocher émette un événement change. Tu peux vérifier ce comportement simplement avec cette page et le code ci-après dans la console de ton navigateur.

document.getElementById('horns').addEventListener('change', (e) => {
    console.log('Changé', e.target.checked);
})

Edit

Tu n'as aucune erreur JavaScript qui te soit notifiée dans les outils de ton navigateur ?

-
Edité par Ymox 8 mai 2024 à 15:47:06

Hello, il suffit de wrapper ton label et ta checkbox dans un div et de mettre le click listener sur ce div plutôt que la checkbox elle même

Ce qui ferait que la navigation au clavier ne permettrait plus le fonctionnement attendu. Je ne recommande pas la solution ci-avant pour le coup.

J'agrée à ce que dit Ymox, dans son premier et son second message.

Attention cependant, désactiver des éléments de formulaire peut être contre-productif. Un peu de lecture : Don’t Disable Form Controls (Roselli dit que les boutons, c'est ok, donc tu es sur la bonne voie, par contre, il faudra agir différemment sur la dernière étape de ton formulaire, où tu auras un élément de soumission).