禁用按钮在 jquery 和 ajax 中不起作用

Question

我想在用户单击 HTML 表单中的提交按钮后禁用提交按钮。但是表单会直接重定向到下一页而不禁用按钮。

理想的顺序是：

1. 用户点击提交按钮
2. 已执行验证
3. 提交按钮禁用
4. 表单数据提交到数据库/电子表格
5. 用户被重定向到感谢页面

使用以下代码，唯一的问题是提交按钮没有被禁用，其他一切都正常工作。请提出修复代码的替代方法。我正在使用在 jquery 1.4.1 上运行的 WordPress。所以，$input.prop('disabled', true) 也不起作用

HTML：

    <form id="test-form" method="post" name="test-form" action="">
<div>
<input class="input-field" name="Name" required type="text" placeholder="Enter name" />
</div>

<div>
<input class="input-field" name="Phone" required type="number" placeholder="Enter number" />
</div>

<div><button id="submit-form" class="btn" type="submit" name="submit-form">Submit</button></div>
</form>

JQUERY

var $form = $('form#test-form');
url = 'https://abcd';


 $form.submit(function(e) {
  $('submit-form').attr('disabled', 'disabled');
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(function() {
            location.replace("/thank-you/");
        });
e.preventDefault();
      });
    });

Answer 1

给你的 id 是错误的。试试这个

$(function(){
var $form = $('#test-form');
url = 'https://abcd';
 $form.submit(function(e) {
    e.preventDefault();    
  $('#submit-form').attr('disabled', 'disabled');
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(function() {
            location.replace("/thank-you/");
        });
      });
      });