简体   繁体   中英

How to disable a button after enabling it with javascript?

I have a button that needs to be disabled until I have all the forms correctly filled. I can do it, but, when I enable the button, I can't disable it again when I remove any form.

Code of the button

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

Code to disable/enable the button

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

Other elements

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

You have already added the disabled attribute in your button. Remove the attribute and trigger it from JS when required. Also put your statement in following function

$(document).ready(function() {

});

问题解决了,这是一个糟糕的算法,它只检查所有表单是否正确填充在if应该没有输入的内部。

Removes the "disabled" event.

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

Adds the "disabled" event.

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

You don't need to write anything for "disabled".

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM