how can I disable everything inside a form using javascript/jquery?

Old question, but nobody mentioned using css:

pointer-events: none;

Whole form becomes immune from click but also hovers.

You can do this the easiest way by using jQuery. It will do this for all input, select and textarea elements (even if there are more than one in numbers of these types).

$("input, select, option, textarea", "#formid").prop('disabled',true);

or you can do this as well but this will disable all elements (only those elements on which it can be applied).

$("*", "#formid").prop('disabled',true);

disabled property can applies to following elements:

• button
• fieldset
• input
• optgroup
• option
• select
• textarea

But its upto you that what do you prefer to use.

Old question, but right now you can do it easily in pure javascript with an array method:

form = document.querySelector('form-selector');
Array.from(form.elements).forEach(formElement => formElement.disabled = true);

1) form.elements returns a collection with all the form controls (inputs, buttons, fieldsets, etc.) as an HTMLFormControlsCollection.

2) Array.from() turns the collection into an array object.

3) This allows us to use the array.forEach() method to iterate through all the items in the array...

4) ...and disable them with formElement.disabled = true.

Here is another pure JavaScript example that I used. Works fine without Array.from() as a NodeList has it's own forEach method.

document.querySelectorAll('#formID input, #formID select, #formID button, #formID textarea').forEach(elem => elem.disabled = true);

This one has never failed me and I did not see this approach on the other answers.

//disable inputs
$.each($("#yourForm").find("input, button, textarea, select"), function(index, value) {
  $(value).prop("disabled",true);
 });

disable the form by setting an attribute on it that disables interaction generally

<style>form[busy]{pointer-events:none;}</style>
<form>....</form>
<script>
function submitting(event){
    event.preventDefault();
    const form = this; // or event.target;
    // just in case...
    if(form.hasAttribute('busy')) return;
    // possibly do validation, etc... then disable if all good
    form.setAttribute('busy','');
    
    return fetch('/api/TODO', {/*TODO*/})
    .then(result=>{ 'TODO show success' return result; })
    .catch(error=>{ 'TODO show error info' return Promise.reject(error); })
    .finally(()=>{
        form.removeAttribute('busy');
    })
    ;  
}
Array.from(document.querySelectorAll('form')).forEach(form=>form.addEventListener('submit',submitting);
</script>

Javascript : Disable all form fields :

function disabledForm(){
  var inputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < inputs.length; i++) { 
        inputs[i].disabled = true;
    } 
     var selects = document.getElementsByTagName("select");
     for (var i = 0; i < selects.length; i++) {
         selects[i].disabled = true;
     }
    var textareas = document.getElementsByTagName("textarea"); 
    for (var i = 0; i < textareas.length; i++) { 
        textareas[i].disabled = true;
    }
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = true;
    }    
}

To Enabled all fields of form see below code

function enableForm(){
      var inputs = document.getElementsByTagName("input"); 
        for (var i = 0; i < inputs.length; i++) { 
            inputs[i].disabled = false;
        } 
         var selects = document.getElementsByTagName("select");
         for (var i = 0; i < selects.length; i++) {
             selects[i].disabled = false;
         }
        var textareas = document.getElementsByTagName("textarea"); 
        for (var i = 0; i < textareas.length; i++) { 
            textareas[i].disabled = false;
        }
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].disabled = false;
        }    
    }

As the answer by Tim Down I suggest:

const FORM_ELEMENTS = document.getElementById('idelementhere').elements;
for (i = 0; i < FORM_ELEMENTS.length; i++) {
    FORM_ELEMENTS[i].disabled = true;
}

This will disable all elements inside a form.

for what it is worth, knowing that this post is VERY old... This is NOT a read-only approach, but works for me. I use form.hidden = true.