How to disable all input controls inside a form using jQuery

  9940 views   2 years ago jQuery

Use the jQuery prop() method

You can use the jQuery prop() method in combination with the :input selector to disable all <input><textarea><select> and <button> elements inside an HTML form dynamically using jQuery. The prop() method require jQuery 1.6 and above.

Let's check out an example to understand how this method basically works:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery Disable All Form Elements</title>
    label {
        display: block;
        margin-bottom: 5px;
    label, input, textarea, select {
        margin-bottom: 10px;
<script src=""></script>
        $("#myForm :input").prop("disabled", true);
    <form id="myForm">
        <input type="text">
        <button type="button">Submit</button>
        <button type="button">Reset</button>


Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]