• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / jQuery / Using jQuery to Disable Input

Using jQuery to Disable Input

January 3, 2022 Leave a Comment

We can use jQuery to disable an input field on a form. The easiest way to do this is using the jQuery prop() method.

$('input').prop('disabled', true);

Here we can use the prop method on an input field, and change its disabled attribute to true.

The disabled attribute is very similar to the readonly attribute, the main difference is that the value of a field with a disabled attribute will not be sent to the server when the form is submitted. While readonly input will.

An example of using jQuery to enable/disable input on a form

Below we will have a simple form with name and email fields. All the information will be disabled to start, but once you click on the edit button, it will enable all of the input fields to be changed. Since this is just an example, none of the information will actually be saved, but you can see how to allow a user to edit a disabled field.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Smith" disabled><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="john.smith@mail.com" disabled><br><br>
</form> 
<div class="button1">Edit</div>
<div class="button2">Done editing</div>

We will then use jQuery to allow the user to click the edit button, and when that is triggered, it will enable all the disabled fields. When the user is done, clicking the “Done editing” button will then disable all of the fields. We will use the jQuery click() and prop() methods. Here is the code:

$(".button1").click(function(){
  $('input').prop('disabled', false);
  $(".button1").hide();
  $(".button2").css('display','inline-block');
});

$(".button2").click(function(){
  $('input').prop('disabled', true);
  $(".button1").css('display','inline-block');
  $(".button2").hide();
});

The final code and output for this example of how to enable and disable input fields using jQuery is below:

Code Output:






Edit
Done editing

Full Code:

<style>.button-div {display:inline-block; padding: 5px 15px; background: #415c7e; color: #fff; font-size: 14px; cursor: pointer; border-radius: 4px; margin-bottom: 10px;} .button-div:hover { background: #314c6e; } .button2 {display: none;}</style><form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Smith" disabled><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="john.smith@mail.com" disabled><br><br>
</form>
<div class="button1 button-div">Edit</div>
<div class="button2">Done editing</div>

<script>

$(".button1").click(function(){
  $('input').prop('disabled', false);
  $(".button1").hide();
  $(".button2").css('display','inline-block');
});

$(".button2").click(function(){
  $('input').prop('disabled', true);
  $(".button1").css('display','inline-block');
  $(".button2").hide();
});

</script>

Hopefully this article has been useful in helping you understand how to use jQuery to disable input.

Other Articles You'll Also Like:

  • 1.  jQuery mouseleave – An Interactive Example of the mouseleave Method
  • 2.  Using jQuery to Change the Font Size of a Paragraph
  • 3.  Set the Height of a Div Using jQuery
  • 4.  Using jQuery to Increment Value on Click
  • 5.  Using jQuery to Change Background Color
  • 6.  jQuery hover – An Interactive Example of the hover Method
  • 7.  How to Uncheck All Checkboxes in jQuery
  • 8.  jQuery slideDown – How to Slide Down and Show an Element Using jQuery
  • 9.  Using jQuery to Get Value of Select On Change
  • 10.  Using jQuery to Count Children of an Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy