Javascript 如何在AJAX请求正在进行时禁用提交按钮，并在收到成功的AJAX响应后启用它？

我有以下HTML代码：

<form action="view_rebate_master.php" method="post">
  <div class="form-group">
    <label for="company_name" class="col-lg-12">Manufacturer</label>
    <div class="col-lg-12">
      <select id="company_id" class="form-control" onchange="GetProductByManufacturerID(this.value)" name="company_id">
        <option selected="selected" value="">All Manufacturers</option>
        <option value="40">Test</option>
        <option value="42">RK</option>
        <option value="49">Blue Nun</option>
        <option value="58">Unique Imports</option>
        <option value="59">Pernod Ricard</option>
        <option value="77">Smoking Loon</option>
        <option value="78">Beringer</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="form-group">
      <label for="product_id" class="col-lg-12">Product Name</label>
      <div class="col-lg-12">
        <select id="product_id" class="form-control" name="product_id">
          <option selected="selected" value="">All Products</option>
          <option value="12">Riesling</option>
          <option value="24">Superio Vodka</option>
          <option value="32">Heineken</option>
          <option value="33">Strong Bow</option>
          <option value="34">Grocery</option>
          <option value="35">Ruler</option>
          <option value="36">Glass</option>
          <option value="37">Brown Bread</option>
          <option value="38">White Bread</option>
          <option value="55">Cabernet Sauvignon</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-lg-12">   
    <div class="col-xs-5">
      <div class="form-group">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary" name="search" id="search">Search Rebates</button>
    </div>
  </div>
</div>

制造商
所有制造商
试验
RK
藍仙姑
独特进口
保乐力加集团
吸烟区
贝林格
品名
所有产品
雷司令
超级伏特加
喜力啤酒
强弓
杂货店
尺子
玻璃
黑面包
白面包
赤霞珠
搜索折扣

AJAX jQuery代码如下所示：

function GetProductByManufacturerID(value) { 
  $.ajax({
    type: "POST",
    url: "add_rebate_by_quat_volume.php",
    data: { manufacturer_id: value, op:"" },
    beforeSend: function() { 
      $("#product_id").html('<option> Loading ...</option>');
    },
    success:function(data){ 
      $("#product_id").html('');
      $("#product_id").append(data);
    }
  });
}

函数GetProductByManufacturerID（值）{ $.ajax({ 类型：“POST”， url:“add_retain_by_quat_volume.php”， 数据：{manufacturer_id:value，op:'}， beforeSend:function（）{ $（“#产品id”）.html（'Loading…'）； }, 成功：函数（数据）{ $（“#产品id”）.html（“”）； $（“#产品id”）。追加（数据）； } }); }

---

我想通过更改select control（select control for Manufacturer selection）的值来进行AJAX函数调用时禁用submit按钮，并且在收到AJAX成功响应之前应该禁用它。当AJAX成功响应将收到时，用户应该能够单击submit按钮。如何做到这一点？提前感谢。

对于禁用

 $("#search").prop('disabled', true);

 $("#search").prop('disabled', false);

对于启用

 $("#search").prop('disabled', true);

 $("#search").prop('disabled', false);

在你的函数中如下所示

function GetProductByManufacturerID(value) { 
  $.ajax({
    type: "POST",
    url: "add_rebate_by_quat_volume.php",
    data: { manufacturer_id: value, op:"" },
    beforeSend: function() { 
      $("#product_id").html('<option> Loading ...</option>');
      $("#search").prop('disabled', true); // disable button
    },
    success:function(data){ 
      $("#product_id").html('');
      $("#product_id").append(data);
      $("#search").prop('disabled', false); // enable button
    }
  });
}

函数GetProductByManufacturerID（值）{ $.ajax({ 类型：“POST”， url:“add_retain_by_quat_volume.php”， 数据：{manufacturer_id:value，op:'}， beforeSend:function（）{ $（“#产品id”）.html（'Loading…'）； $（“#搜索”）.prop（'disabled'，true）；//禁用按钮 }, 成功：函数（数据）{ $（“#产品id”）.html（“”）； $（“#产品id”）。追加（数据）； $（“#搜索”）.prop（'disabled'，false）；//启用按钮 } }); }

---

像这样的东西可以满足您的需要。对于整个页面，对于任何ajax请求，这都是全局的

$(document).ajaxStart(function() {
   $("#search").prop('disabled', true);
}).ajaxStop(function() {
   $("#search").prop('disabled', false);
});

---

我会在ajax调用之前禁用该按钮，并在成功回调时再次启用它，在执行以下操作时有问题吗

 function GetProductByManufacturerID(value) { 
  $('#search').addAttr('disabled');
  $.ajax({
    type: "POST",
   url: "add_rebate_by_quat_volume.php",
   data: { manufacturer_id: value, op:"" },
   beforeSend: function() { 
  $("#product_id").html('<option> Loading ...      </option>');
   },
   success:function(data){ 
    $("#product_id").html('');

    $("#product_id").append(data);
    $('#search').removeAttr('disabled');
     }
   });
   }

函数GetProductByManufacturerID（值）{ $（“#搜索”）.addAttr（'disabled'）； $.ajax({ 类型：“POST”， url:“add_retain_by_quat_volume.php”， 数据：{manufacturer_id:value，op:'}， beforeSend:function（）{ $（“#产品id”）.html（'Loading…'）； }, 成功：函数（数据）{ $（“#产品id”）.html（“”）； $（“#产品id”）。追加（数据）； $（“#搜索”）.removeAttr（'disabled'）； } }); }