执行AJAX时禁用所有表单元素

我有一个表单，其中每个用户输入字段都启用了AJAX，并且我想在更改其中一个表单元素时禁用所有表单元素-可能吗？

是的，有可能。例如，您可以将.js文件附加到表单并扩展Drupal.ajax对象。
每个可以从表单启动AJAX提交的元素都有其自己的Drupal.ajax实例。您可以在全局对象中找到它Drupal.ajax。而每Drupal.ajax对象所拥有的方法success，error，beforeSend等
下面是一个简单的例子来验证这个想法：

;(function($) {

  Drupal.testAjax = {
    // Our form
    form_id: 'node-type-form'  //Yes, I tested on my extended node creation form
  };

  Drupal.behaviors.testAjax = {
    attach: function(context, settings) {
      // We extend Drupal.ajax objects for all AJAX elements in our form 
      for (ajax_el in settings.ajax) {
        if (Drupal.ajax[ajax_el].element.form) {
          if (Drupal.ajax[ajax_el].element.form.id === Drupal.testAjax.form_id) {
            Drupal.ajax[ajax_el].beforeSubmit = Drupal.testAjax.beforeSubmit;
            Drupal.ajax[ajax_el].success = Drupal.testAjax.success;
            Drupal.ajax[ajax_el].error = Drupal.testAjax.error;
          }
        }
      }
    }   
  };

  // Disable form
  Drupal.testAjax.beforeSubmit = function (form_values, form, options) {
    $(form[0].elements).not(':disabled')
                       .addClass('test-ajax-disabled')
                       .attr('disabled', true);
  }

  // Enable form
  Drupal.testAjax.enableForm = function(form) {
    $(form).find('.test-ajax-disabled')
            .removeClass('test-ajax-disabled')
            .attr('disabled', false);

  }

  Drupal.testAjax.success = function (response, status) {
    Drupal.testAjax.enableForm(this.element.form);
    // Call original method with main functionality
    Drupal.ajax.prototype.success.call(this, response, status);
  }
  Drupal.testAjax.error = function (response, uri) {
    Drupal.testAjax.enableForm(this.element.form);
    // Call original method with main functionality
    Drupal.ajax.prototype.error.call(this, response, uri);
  }

})(jQuery);

这种方法似乎有些困难，但是它使您可以完全控制表单中的AJAX。
另一种方法是使用jQuery方法，例如.ajaxStart()，因为Drupal使用jQuery AJAX Framework。

我创建了一个小部件，该小部件可以完全禁用或显示页面上内容的只读视图。它禁用所有按钮，锚点，删除所有单击事件等，并可以重新将其重新启用。它甚至还支持所有jQuery UI小部件。我为在工作中编写的应用程序创建了它。您可以自由使用它。

在（http://www.dougestep.com/dme/jquery-disabler-widget）上进行检查。

您可以使用以下jQuery脚本在ajax期间禁用/启用某些元素：

  // Disable elements on ajax call.
  $(document)
    .ajaxStart(function() {
      if ($('.ajax-disabling').length) {
        // Disable elements.
        $(".ajax-disabling input").attr("disabled", "disabled");
      }
    })
    .ajaxComplete(function() {
      if ($('.ajax-disabling').length) {
        // Enable elements.
        $(".ajax-disabling input").removeAttr("disabled");
      }
    });

如果将类添加ajax-disabling到<form>或<div>（或任何其他包装器），则在ajax期间将禁用所有输入。

您可以使用选择器玩耍，也可以禁用选择和文本区域。

另请参阅https://drupal.stackexchange.com/a/76838/6309

更新资料

如果您已经禁用了表单上的元素，并且希望在ajax之后使用下一个代码来禁用它们：

  // Disable form elements on ajax call.
  $(document)
    .ajaxStart(function() {
      if ($('.ajax-disabling').length) {
        // Disable elements.
        $('.ajax-disabling input, .ajax-disabling select').each(function(){
          if($(this).attr('disabled') !== 'disabled') {
            $(this).addClass('ajax-form-disabled');
            $(this).attr('disabled', 'disabled');
          }
        });
      }
    })
    .ajaxComplete(function() {
      if ($('.ajax-disabling').length) {
        // Enable elements.
        $('.ajax-disabling input, .ajax-disabling select').each(function(){
          if($(this).hasClass('ajax-form-disabled')) {
            $(this).removeClass('ajax-form-disabled');
            $(this).removeAttr('disabled');
          }
        });
      }
    });