javascript - ajax 单击禁用提交按钮并再次启用

Question

大家好，我有这个功能，效果很棒，但我遇到了小问题

 $(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
  $("input[type='submit']").attr("disabled", true).val("Please wait.");
    setTimeout(function(){
    $("input[type='submit']").attr("disabled", false).val("Submit");    
}, 3*1000);
  return true;
})
})

问题是，当我在一个页面中有 2 个表单时，它会更改所有提交按钮的值，我只希望该功能仅针对单击的按钮而不是所有提交按钮激活。

我希望你明白我的意思。我知道我需要修改函数中的一些内容，但这样做时遇到一些问题...

Answer 1

使用 this 引用当前提交的表单，然后您可以使用 .find 获取该表单的后代 submit 输入:

$("form").submit(function(){
  const input = $(this)
    .find("input[type='submit']")
    .attr("disabled", true)
    .val("Please wait.");
  setTimeout(function(){
    input
      .attr("disabled", false)
      .val("Submit");    
  }, 3*1000);
  return true;
});

另请注意，您可能应该更喜欢 .prop over .attr ，除非您使用的是古老版本的 jQuery。