Vô hiệu hóa tất cả các thành phần của biểu mẫu khi thực hiện AJAX

Tôi có một biểu mẫu trong đó mọi trường nhập liệu của người dùng đều được bật AJAX và tôi muốn tắt tất cả các thành phần của biểu mẫu khi một trong số chúng được thay đổi - điều đó có khả thi không?

Vâng nó có thể. Ví dụ: bạn có thể đính kèm tệp .js vào biểu mẫu của mình và mở rộng đối tượng Drupal.ajax.
Mọi yếu tố có thể bắt đầu đệ trình AJAX từ một biểu mẫu đều có phiên bản Drupal.ajax riêng. Bạn có thể tìm thấy nó trong các đối tượng toàn cầu Drupal.ajax. Và mọi đối tượng Drupal.ajax có phương pháp success, error, beforeSend, vv
Đây là một ví dụ đơn giản để chứng minh ý tưởng:

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

Cách tiếp cận này có vẻ hơi khó khăn, nhưng nó mang lại cho bạn toàn quyền kiểm soát AJAX trong các biểu mẫu của bạn.
Một cách khác là sử dụng các phương thức jQuery như thế .ajaxStart(), bởi vì Drupal sử dụng jQuery AJAX Framework.

Tôi đã tạo một tiện ích hoàn toàn có thể vô hiệu hóa hoặc hiển thị chế độ xem chỉ đọc nội dung trên trang của bạn. Nó vô hiệu hóa tất cả các nút, neo, loại bỏ tất cả các sự kiện nhấp chuột, v.v. và có thể kích hoạt lại tất cả chúng một lần nữa. Nó thậm chí còn hỗ trợ tất cả các widget UI jQuery. Tôi đã tạo nó cho một ứng dụng tôi đã viết tại nơi làm việc. Bạn có thể tự do sử dụng nó.

Hãy xem thử tại ( http://www.dougestep.com/dme/jquery-disabler-widget ).

Bạn có thể tắt / bật một số thành phần trong ajax bằng cách sử dụng tập lệnh jQuery này:

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

Nếu bạn sẽ thêm lớp ajax-disablingvào <form>hoặc <div>(hoặc bất kỳ trình bao bọc nào khác), tất cả các đầu vào sẽ bị vô hiệu hóa bên trong trong khi ajax.

Bạn có thể chơi xung quanh với các bộ chọn và vô hiệu hóa các lựa chọn và textareas.

Xem thêm https://drupal.stackexchange.com/a/76838/6309

Cập nhật

Nếu bạn đã vô hiệu hóa các thành phần trên biểu mẫu và bạn muốn giữ chúng bị vô hiệu hóa sau khi ajax sử dụng mã tiếp theo:

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