javascript - How do I disable and re-enable a submit type button with a slider style checkbox?

Question

I'm currently having some issue to figure how to disable and enable a submit type button with a slider checkbox.

This my script JS for switching mode of the button

This is an extract of the html part And finally, here is the CSS part for the button and slider

    /* Button CSS */
    .valider{
       float: right;
       padding: 12px 20px;
       margin-top: 1%;
       cursor: pointer;
       border: 2px solid white;
       border-radius: 4px;
       color: white;
       background-color: #24c238;
    }

    .valider:hover{
       border: 2px solid #24c238;
       color: #24c238;
       background-color: white;
    }

    .valider:disabled{
       cursor: default;
       border-color: #999;
       color: #999;
       background-color: #4d7d52;
    }

    /* Slider CSS */
    .switch {
       position: relative;
       display: inline-block;
       width: 50px;
       height: 10px;
    }

    .switch input {
       opacity: 0;
       width: 0;
       height: 0;
    }

    .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
    }

    .slider:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: white;
       -webkit-transition: .4s;
       transition: .4s;
    }

    input:checked + .slider {
       background-color: #24c238;
    }

    input:focus + .slider {
       box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
       -webkit-transform: translateX(26px);
       -ms-transform: translateX(26px);
       transform: translateX(26px);
    }

/* language: lang-html */

    <script>
    function check() {
        var ele = document.getElementsById('check');
        var flag = 0;
    
        for (var i = 0; i < ele.length; i ++) {
            if (ele[i].checked) {
                flag = 1;
            }
        }
    
        if (flag === 1) {
            document.getElementByClass('valider').disabled = "enabled";
        } else {
            document.getElementByClass('valider').disabled = "disabled";
        }
    } 
    </script>

<div class="formulaire">
<form action="./signCheck.php" method="GET">
    <h3>Inscrivez-vous</h3>
    <div class="ligne">
        <div class="col25">
            <label for="nom"><i class="fas fa-user"></i> Nom<text class="obligatoire">*</text></label>
        </div>
        <div class="col75">
            <input type="text" id="nom" name="nom" placeholder="ex: Martin">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="prenom"><i class="fas fa-user"></i> Prénom<text class="obligatoire">*</text></label>
        </div>
        <div class="col75">
            <input type="text" id="prenom" name="prenom" placeholder="ex: Pierre">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="motDePasse"><i class="fas fa-unlock-alt"></i> Mot de Passe<text class="obligatoire">*</text></label>
        </div>
        <div class="col75">
            <input type="password" id="mdp" name="mdp" placeholder="Maximum 12 caractères" maxlength="12">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="motDePasse"><i class="fas fa-unlock-alt"></i> Confirmer Mot de Passe<text class="obligatoire">*</text></label>
        </div>
        <div class="col75">
            <input type="password" id="cMdp" name="cMdp" placeholder="************" maxlength="12">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="telephone"><i class="fas fa-phone-alt"></i> Téléphone<text class="obligatoire">*</text></label>
        </div>
        <div class="col75">
            <input type="text" id="tel" name="tel" placeholder="ex: 0602215684" maxlength="10">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="mail"><i class="fas fa-at"></i> Adresse email</label>
        </div>
        <div class="col75">
            <input type="text" id="email" name="email" placeholder="ex: [email protected]">
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="typeCompte"><i class="fas fa-info-circle"></i> Statut</label>
        </div>
        <div class="col75">
            <select id="typeCompte" name="typeCompte">
                <option value="S">Stagiaire</option>
                <option value="P">Partenaire</option>
                <option value="E">Employeur</option>
            </select>
        </div>
    </div>
    <div class="ligne">
        <div class="col25">
            <label for="confidential" style="font-size: 40%">En vous inscrivant, vous acceptez nos <a href="#">politiques de confidentialité</a></label>
            <label style="color: white; font-size: 40%;">* champs obligatoires</label>
        </div>
        <div class="col75">
            <label class="switch">
                <input type="checkbox" id="check" onclick="check()"><span class="slider"></span>
            </label>
        </div>
        <div class="ligne">
          <button class="valider" id="submitbtn" type="submit" formaction="./signCheck" formmethod="get" disabled>
            <i class="fas fa-sign-in-alt"></i> S'inscrire
          </button>
        </div>
    </div>
</form>
<div style="font-size: 50%">Déjà un compte ? <a href="connexion">Connectez-vous</a></div>
</div>



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="icon" type="image/png" href="./img/logo_icon.png" size="256x256">
    <link rel="stylesheet" href="./styles/stylePrincipal.css"/><!-- Importation du style principal -->
    <link rel="stylesheet" href="./styles/responsiveBarStyle.css"/><!-- Importation du style du menu de navigation responsive -->
    <link rel="stylesheet" href="./styles/responsiveForm.css"/><!-- Importation du style de formulaire responsive -->
    <link rel="stylesheet" href="./styles/sliderStyle.css"/><!-- Importation du style de formulaire responsive -->
    <script src="https://kit.fontawesome.com/53c23ad143.js" crossorigin="anonymous"></script><!-- Importation du kit FontAwesome pour des ic?nes stylisés -->
    <title>Domiform' - Réserver</title><!-- Titre de l'onglet dans le navigateur -->
</head>

<body>
    <?php include "./modules/responsiveBar.php" ?>
    <header><img class="title" src="../img/title.png"></header>
    
    <main>
        <section>
            <?php include "./modules/forms/signForm.php" ?>
        </section>
    </main>
    
    <?php include "./modules/footer.php" ?>
</body>
</html>

question from:https://stackoverflow.com/questions/65903740/how-do-i-disable-and-re-enable-a-submit-type-button-with-a-slider-style-checkbox

Answer 1

Hey try to change your check function like the following thing:

<script>
    function check() {
        var ele = document.getElementById('check');
        var flag = 0;
        if (ele.checked) {
            flag = 1;
        }else{
            flag = 0;
                   }
        if (flag == 1) {
            document.getElementsByClassName('valider')[0].disabled = true;
        } else {
            document.getElementsByClassName('valider')[0].disabled = false;
        }
    } 
    </script>

and change too in html the following line:

<button class="valider" type="submit" formaction="./signCheck" formmethod="get" disabled><i class="fas fa-sign-in-alt"></i> S'inscrire</button>

disabled with not equal.

Hope that could help you!