如何使用 slider 样式复选框禁用和重新启用提交类型按钮？

Question

我目前遇到一些问题，想知道如何使用 slider checkbox禁用和启用提交类型button 。

 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"; } }

 /* 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); }

 <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: monadressemail@mail.com"> </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>

但是没有任何效果，我最初很容易禁用该按钮，但我没有成功启用它。

有什么建议可以帮助我弄清楚吗？

Answer 1

disabled是 boolean 属性。 因此，只要 HTMLElement 设置了 disabled 属性（设置为除false之外的任何值），它就会被禁用。 docs要重新启用元素，您必须完全删除disabled属性或将其明确设置为false

此外，由于用于该切换的所有元素都有 id，因此通过此 id 而不是类名更容易找到它们，因为这不会返回元素列表，而只会返回单个元素。

function check() {
    var ele = document.getElementById('check');

    if (ele.checked) {
        document.getElementById('submitbtn').disabled = false;
    } else {
        document.getElementById('submitbtn').disabled = true;
    }
}

Answer 2

嘿，尝试更改您的支票 function ，如下所示：

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

并在 html 中更改以下行：

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

禁用不等于。

希望能帮到你！

Answer 3

您的代码中有很多错误：

HTML

对于按钮class属性，您有一个额外的结束双引号：

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

应该：

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

JS

1. function 名称是getElementById() ，而不是getElementsById() （带有“s”）：

var ele = document.getElementsById('check');

应该：

var ele = document.getElementById('check');

2. getElementById()返回单个元素，因此返回整个块

for (var i = 0; i < ele.length; i ++) {
  if (ele[i].checked) {
    flag = 1;
  }
}

没有意义。

3. 由于第 (2) 点，检查if (flag === 1)没有意义（也没有按预期工作）

if (flag === 1)

应该：

if (ele.checked)

4. function 是getElementsByClassName() （带有's'），而不是getElementByClass()并返回一个集合。 无论如何，由于每个表单应该只有一个提交按钮，因此为它分配一个id并使用getElementById()定位它会更有意义。

5. disabled是一个 boolean 属性，因此您不应将其从“禁用”更改为“启用”，但应添加或删除它。

document.getElementByClass('valider').disabled = "enabled";

和

document.getElementByClass('valider').disabled = "disabled";

应该：

document.getElementById('submitbtn').removeAttribute("disabled");

和

document.getElementById('submitbtn').setAttribute("disabled", true);

把所有东西放在一起，你会得到：

 function check() { var ele = document.getElementById('check'); if (ele.checked) { document.getElementById('submitbtn').removeAttribute("disabled"); } else { document.getElementById('submitbtn').setAttribute("disabled", true); } }

 /* 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); }

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