Question

我有一个使用jQuery将数据保存到数据库的表单。在成功响应中，我想禁用表单上的提交按钮，以便不能重新提交。我试过$(this).find("button[type='submit']").prop('disabled',true); 但它不起作用，我不明白为什么。谁能告诉我什么是错的？

表格

 <form action="" id="like_unlike" method="" enctype="multipart/form-data">
    <input type="hidden" name="file" value="<?php echo $page_id;?>" />
    <input type="hidden" name="userid" value="<?php echo $_SESSION['user_session'];?>" />
    <span> <button type="submit" id="like" class="btn btn-default btn-small" name="like"><span class="icon-heart-empty"id="heart"></span>
    <span class="submit-text" id="count"><?php echo $rowcount?></span></button></span>
    </form>

jQuery

$("#like_unlike").submit( function(e) { //Second Form
    e.preventDefault();
     var url = "update.php"; //Grab URL from form
     var formdata = $(this).serialize();
          console.log(formdata);   
        $.post(url, formdata, //Post the form
            function(response) {

    $('#count').html(response);
       $(this).find("button[type='submit']").prop('disabled',true);
              });
              });
     });

Answer 1

我注意到你在

中使用 this

$(this).find("button[type='submit']").prop('disabled',true);

你应该知道它并没有引用你想要的形式，而是ajaxSettings。

Answer 2

从jquery代码中删除额外的});。

＆＃13;

$("#like_unlike").submit(function(e) { //Second Form
e.preventDefault();
var url = "update.php"; //Grab URL from form
var formdata = $(this).serialize();
console.log(formdata);
$(this).find("button[type='submit']").prop('disabled',true);
$.post(url, formdata, //Post the form
  function(response) {
      $('#count').html(response);
    $(this).find("button[type='submit']").prop('disabled',true);
    
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="like_unlike" method="" enctype="multipart/form-data">
  <input type="hidden" name="file" value="1" />
  <input type="hidden" name="userid" value="23" />
  <span> <button type="submit" id="like" class="btn btn-default btn-small" name="like"><span class="icon-heart-empty"id="heart"></span>
  <span class="submit-text" id="count">Row Count</span></button>
  </span>
</form>

＆＃13;

＆＃13; 其他方法可以禁用基于id的按钮，如

$("#count").attr("disabled", "disabled");

如何在使用jQuery进行Ajax响应后禁用提交按钮？

2 个答案: