Form API Ajax - how to disable also form elements that will be changed, not only triggering element?

Question

So, element that triggered AJAX gets disabled. But how to make Drupal also disable everything inside ['#ajax']['wrapper']? After all, allowing user to edit something that will get replaced as soon as AJAX response is ready isn't the wisest idea, and I'd like to prevent that. And my AJAX created elements have their own AJAX too, race conditions are pretty bad already.

Is there any ready-made module for that? Or API way I'm missing? If no, where exactly should I put that code to minimize risk of incompatibilities?

Edit: I'm looking for a safe and stable way. It means no hard-coded identifiers in JavaScript files. Solution that breaks when someone edits form definition, or one that works for only one AJAX in form is not enough. After all, I need to avoid race conditions, and I already noted I have multiple AJAX actions, working on different sets of elements, on one page - so no marking elements for disabling at PHP level. I can eventually mark them with classes like disable-on-X and disable-on-Y, but I need to know if it's X or Y AJAX happening. And ideally I'd just disable everything inside ['#ajax']['wrapper'] without any additional marks, as they are not really needed - but again, I would need to know proper ['#ajax']['wrapper'] in javascript.

Answer 1

You can disable/enable some elements during ajax using this jQuery script:

// Disable filters on ajax call.
  $(document)
    .ajaxStart(function() {
      // Place here all elements that must be disabled during ajax.
      $("#path-to-the-element").attr("disabled", "disabled");
  })
    .ajaxComplete(function() {
      // Place here all elements that must be enablec after ajax.
      $("#path-to-the-element").removeAttr("disabled");
  });

Update. Some helper suggestions:

• You can loop all inputs in wrapper element and disable each of them using jQuery.each

• You can see what is the class or id attribute of your generated
  element html. Also you can add some special CSS class disable-on-ajax to all your elements or wrappers that must be disabled on ajax. Then you will be able to handle them with one line of jQuery code.

Update 2

I can suggest one more solution. E.g. you have added class for your target elements 'disable-on-ajax'. Then you can write function that will be triggered on blur, select change, click etc.(You'll need to implements all target triggger checks). In this function you'll check if element has class "disable-on-ajax". And add second class "ajax-disabled". Then on ajaxStart you'll handle only element with class "ajax-disabled"

You can populate form ajax-triggering elements, add property like ajax_wrapper="wrapper", ajax_event="event type" and then in behavior attach events