title: How to disable all inputs and textboxes after a form submitted?
body: <p>I have several issues to discuss with you:</p>
  
  <ol>
  <li>I need all elements in the form disabled after a server answer "400" from ajax. So the user knows that he just submit that form (ajax).</li>
  <li>I'm also thinking of setting a status to "readonly" after a submit is clicked as well.</li>
  </ol>
  
  <p>The reasons behind these issues is: I have a booking form which a user can choose multiple rooms for a group. So each room must have it's own guest. Saying I want to make a booking of 3 rooms for my friends. So I select the check-in and check-out. Number of rooms (3). And put in my friends' detail to each form. After I submit the first room. The data has uploaded and all the fields are disabled. Then I do the same to next room by clicking a tab. As pictured below:</p>
  
  <p><img src="https://i.stack.imgur.com/61lIZ.png" alt="Booking Form"></p>
  
  <p>Further requirements:</p>
  
  <ol>
  <li>Do you have some example of jQuery disable form elements after submit?</li>
  <li>Is there a better way of booking multiple rooms in the same time than this?</li>
  </ol>