使用javascript启用按钮后如何禁用它?

时间:2019-06-08 14:21:45

标签: javascript html

我有一个需要禁用的按钮,直到正确填写所有表格为止。我可以做到,但是,当我启用该按钮时,删除任何表单后都无法再次禁用它。

按钮代码

<form method="post">
 <button type="submit" id="botaoSignUp" 
 name="botaoSignUp" disabled class="login100-form-btn">
   Sign Up
 </button>
</form>

禁用/启用按钮的代码

if((document.getElementById("nameAviso")).textContent=="Ok"&&
(document.getElementById("emailAviso")).textContent=="Ok"&&
(document.getElementById("passAviso")).textContent=="Ok"&&
(document.getElementById("localAviso")).textContent=="Ok"){

          document.getElementById("botaoSignUp").disabled = false;
}else{
          document.getElementById("botaoSignUp").disabled = true;
}

其他元素

<div class="wrap-input100">
                        <span class="label-input100">Full Name</span>
                            <input class="input100" type="text" name="name" placeholder="Name" onblur="showHint(this.value, 0)"><span id="nameAviso"></span>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100">
                        <span class="label-input100">Email</span>
                            <input class="input100" type="email" name="email" placeholder="Email addess" onblur="showHint(this.value, 1)"><span id="emailAviso"></span>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100">
                        <span class="label-input100">Password</span>
                            <input class="input100" type="password" name="pass" placeholder="*************" onblur="showHint(this.value, 2)"><span id="passAviso"></span>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100">
                        <span class="label-input100">Localidade</span>
                            <input class="input100" type="text" name="localidade" placeholder="Localidade" onblur="showHint(this.value, 3)"><span id="localAviso"></span>
                        <span class="focus-input100"></span>
                    </div>

3 个答案:

答案 0 :(得分:0)

您已经在按钮中添加了disable属性。 删除该属性,并在需要时从JS触发它。 还要将您的声明放在以下函数中

$(document).ready(function() {

});

答案 1 :(得分:0)

问题解决了,这是一个错误的算法,它仅检查所有表单是否正确填充了是否应该填写的if内。

答案 2 :(得分:0)

删除“禁用”事件。

document.getElementById("botaoSignUp").removeAttribute("disabled");

添加“已禁用”事件。

document.getElementById("botaoSignUp").setAttribute("disabled","");

您无需为“已禁用”编写任何内容。