Deaktivieren Sie alle Formularelemente, wenn Sie AJAX ausführen

Ich habe ein Formular, in dem jedes Benutzereingabefeld AJAX-fähig ist, und ich möchte alle Formularelemente deaktivieren, wenn eines davon geändert wird. Ist dies möglich?

Ja es ist möglich. Sie können beispielsweise eine .js-Datei an Ihr Formular anhängen und das Objekt Drupal.ajax erweitern.
Jedes Element, das die AJAX-Übermittlung von einem Formular aus initiieren kann, verfügt über eine eigene Instanz von Drupal.ajax. Sie finden es im globalen Objekt Drupal.ajax. Und jedes Drupal.ajax Objekt die Methoden hat success, error, beforeSendusw.
Hier ist ein einfaches Beispiel , die Idee zu demonstrieren:

;(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);

Dieser Ansatz mag etwas schwierig erscheinen, gibt Ihnen jedoch die volle Kontrolle über AJAX in Ihren Formularen.
Eine andere Möglichkeit ist die Verwendung von jQuery-Methoden wie .ajaxStart(), da Drupal jQuery AJAX Framework verwendet.

Ich habe ein Widget erstellt, mit dem eine schreibgeschützte Ansicht des Inhalts Ihrer Seite vollständig deaktiviert oder angezeigt werden kann. Es deaktiviert alle Schaltflächen, Anker, entfernt alle Klickereignisse usw. und kann sie alle wieder aktivieren. Es werden sogar alle Widgets der jQuery-Benutzeroberfläche unterstützt. Ich habe es für eine Anwendung erstellt, die ich bei der Arbeit geschrieben habe. Sie können es verwenden.

Überprüfen Sie es unter ( http://www.dougestep.com/dme/jquery-disabler-widget ).

Mit diesem jQuery-Skript können Sie einige Elemente während Ajax deaktivieren / aktivieren:

  // 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");
      }
    });

Wenn Sie ajax-disablingdem <form>oder <div>(oder einem anderen Wrapper) eine Klasse hinzufügen , werden alle Eingaben während des Ajax deaktiviert.

Sie können mit Selektoren herumspielen und auch Auswahl- und Textbereiche deaktivieren.

Siehe auch /drupal//a/76838/6309

Aktualisieren

Wenn Sie Elemente im Formular bereits deaktiviert haben und sie nach Ajax deaktiviert lassen möchten, verwenden Sie den nächsten Code:

  // 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');
          }
        });
      }
    });