通過jQuery禁用和啟用按鈕，但啟用按鈕后不會觸發onclick事件

Question

我有一個似乎無法找到解決方案的問題。 問題是這樣的：我有一些jQuery，它將使按鈕保持禁用狀態，直到所有表單的字段都填滿為止。 當所有字段都填滿時，將啟用該按鈕，但不會觸發用於Google Recaptcha的javascript onSubmit事件。 任何人都可以幫忙

代碼如下：

 //jquery to disable button until all fields are filled up $().ready(function() { // validate signup form on keyup and submit $("#fbForm").validate({ rules: { name: { required: true }, surname: { required: true }, terms: { required: true } }, errorPlacement: function(error, element) { return true; }, submitHandler: function() { } }); $('#fbForm').change(function() { if ($("#fbForm").valid()) { $("#btnSubmit").removeAttr("disabled"); } }); //recaptcha JS function onSubmit(token) { if (screen.width >= 768) { document.getElementById("fbForm").submit(); }else if (screen.width <= 767){ document.getElementById("fbForm2").submit(); } } 

 <form id="fbForm"class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator"> <div class="form-group"> <label for="name "class="col-md-4 control-label">First Name</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required> </div> </div> <div class="help-block with-errors"></div> </div> <!-- Surname: Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="surname">Last Name</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required> </div> </div> <div class="help-block with-errors"></div> </div> <div class="form-group text-center"> <div class="checkbox"> <label> <input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required> I agree </label> <div class="help-block with-errors"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"><br> <button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button> </div> </div> </fieldset> </form> 

Answer 1

您在最后一行缺少}來關閉ready函數。 首先解決該問題。

Answer 2

 $().ready(function() { $('#num').validate(); // validate signup form on keyup and submit $("fbForm").validate({ rules: { name: { required: true }, surname: { required: true }, terms: { required: true } }, errorPlacement: function(error, element) { return true; }, submitHandler: function() { } }); $('#fbForm').change(function() { if ($("#fbForm").valid()) { $("#btnSubmit").removeAttr("disabled"); } }); //recaptcha JS function onSubmit(token) { if (screen.width >= 768) { document.getElementById("fbForm").submit(); }else if (screen.width <= 767){ document.getElementById("fbForm2").submit(); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script> <form name="formSend" id="fbForm" class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator"> <fieldset> <div class="form-group"> <label for="name "class="col-md-4 control-label">First Name</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required> </div> </div> <div class="help-block with-errors"></div> </div> <!-- Surname: Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="surname">Last Name</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required> </div> </div> <div class="help-block with-errors"></div> </div> <div class="form-group text-center"> <div class="checkbox"> <label> <input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required> I agree </label> <div class="help-block with-errors"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"><br> <button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button> </div> </div> </fieldset> </form> 

好的，缺少jquery驗證程序和語法錯誤是導致此問題的原因。 該代碼段工作正常。您應使用可視代碼作為編輯器，並請先解決語法錯誤，然后再在此處發布。