Nonaktifkan semua elemen formulir saat melakukan AJAX

Saya memiliki formulir di mana setiap bidang input pengguna diaktifkan AJAX, dan saya ingin menonaktifkan semua elemen formulir ketika salah satunya diubah - apakah mungkin?

Iya itu mungkin. Misalnya, Anda bisa melampirkan file .js ke formulir Anda dan memperluas objek Drupal.ajax.
Setiap elemen yang dapat memulai pengajuan AJAX dari formulir memiliki instance Drupal.ajax sendiri. Anda dapat menemukannya di objek global Drupal.ajax. Dan setiap benda Drupal.ajax memiliki metode success, error, beforeSenddll
Berikut ini adalah contoh sederhana untuk menunjukkan ide:

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

Pendekatan ini mungkin tampak sedikit sulit, tetapi memberi Anda kendali penuh atas AJAX dalam formulir Anda.
Cara lain adalah dengan menggunakan metode jQuery seperti .ajaxStart(), karena Drupal menggunakan jQuery AJAX Framework.

Saya membuat widget yang dapat sepenuhnya menonaktifkan atau menyajikan tampilan hanya baca konten di halaman Anda. Ini menonaktifkan semua tombol, jangkar, menghapus semua acara klik, dll, dan dapat mengaktifkannya kembali. Bahkan mendukung semua widget jQuery UI juga. Saya membuatnya untuk aplikasi yang saya tulis di tempat kerja. Anda bebas menggunakannya.

Lihat di ( http://www.dougestep.com/dme/jquery-disabler-widget ).

Anda dapat menonaktifkan / mengaktifkan beberapa elemen selama ajax menggunakan skrip jQuery ini:

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

Jika Anda akan menambahkan kelas ajax-disablingke <form>atau <div>(atau pembungkus lain), semua input akan dinonaktifkan di dalam selama ajax.

Anda dapat bermain-main dengan penyeleksi dan menonaktifkan juga memilih dan textareas.

Lihat juga https://drupal.stackexchange.com/a/76838/6309

Memperbarui

Jika Anda sudah menonaktifkan elemen pada formulir dan Anda ingin tetap menonaktifkannya setelah ajax gunakan kode berikutnya:

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