How to disable or enable input field using JQuery

If you want to disable any input field like button or checkbox or textbox etc, you can do it using JQuery.

Consider you have the following input fields in your page

<input type="text" id="tb1" />
<input type="button" id="btn1" />
<input type="checkbox" id="chkbx1" />
<input type="radio" id="radio1" />

Now if you don't want to allow a user to enter text into textbox(in cases when you are showing pre-loaded data) or if you don't want to allow a user to click on the submit/send button until all the form fields are valid, then in the above cases you can disable those input fileds using jQuery's prop() method.

jQuery code to disable the input fields:

Disable textbox using jQuery

$("#tb1").prop('disabled', true);  //for jQuery 1.6+
$("#tb1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable textbox using jQuery

$("#tb1").prop('disabled', false); //for jQuery 1.6+
$("#tb1").removeAttr('disabled'); //for jQuery 1.5 and below

Disable button using jQuery

$("#btn1").prop('disabled', true);  //for jQuery 1.6+
$("#btn1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable button using jQuery

$("#btn1").prop('disabled', false); //for jQuery 1.6+
$("#btn1").removeAttr('disabled'); //for jQuery 1.5 and below

You can also disable radio button or checkbox using jQuery in the same way.

In this way you can disable the input fields using jQuery. Let me no if it helped you through comments section. Feel free to share any information.

For more posts on jQuery please visit: jQuery