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를 완전히 제어 할 수 있습니다. Drupal은 jQuery AJAX Framework를 사용하기 때문에
또 다른 방법은과 같은 jQuery 메소드를 사용하는 것 .ajaxStart()입니다.

귀하의 페이지에서 콘텐츠의 읽기 전용보기를 완전히 비활성화하거나 표시 할 수있는 위젯을 만들었습니다. 모든 버튼, 앵커를 비활성화하고 모든 클릭 이벤트를 제거하는 등의 모든 기능을 다시 활성화 할 수 있습니다. 모든 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를 추가하면 ajax 중에 모든 입력이 비활성화됩니다.<form><div>

선택기와 함께 놀 수 있고 선택과 텍스트 영역도 비활성화 할 수 있습니다.

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