Disclosure: This article may contain affiliate links. When you purchase, we may earn a small commission.

How to enable disable Form elements in web page using jQuery? Example Tutorial

In last couple of tutorials you have learned how to get all selected checkbox and radio buttons, and in this tutorial, you will learn how to enable/disable form elements using jQuery. A form element e.g. a text field, radio buttons and checkbox, all represented using input tag can be enabled or disabled by adding an attribute called "disabled". It's similar to "checked" attribute we have seen for checkbox and radio buttons. If this attribute is not present then element is enable, but if this attribute is present then you can use disabled=true to disable the form element and disabled=false to enable the form elements as shown in our example.  Like previous example of checking/unchecking checkbox, you can use prop() jQuery function to enable/disable form element if you are running on jQuery 1.6 or higher version and attr() function if you are running on jQuery 1.5 or lower version. 



jQuery example to enable/disable form elements

In this example, I have a form and there I have a textbox, two radio buttons and a checkbox. In this example, I will show you how you can dynamically enable and disable them using jQuery prop() function. 

In order to demonstrate that, I have created 6 buttons, three buttons to disable text, radio and checkbox input type and three more buttons to enable them later. 

The logic to enable and disable form element is simple, just select the element and call prop( "disabled", true) to disable the element and prop("disabled", false) to enable the element. 

Here is the complete jQuery example:

<html>
<head>
<title>How to enable/disable a form element in jQuery</title>
</head>

<body>

<h2>Enabling and disabling a form element using jQuery</h2>

<form id="register">
Enter your name : <input id="myTextbox" type="text" /><br/>
Select gender : male <input type="radio" class ="gender" name="gender"/> 
female <input type="radio" class ="gender" name="gender"/><br/>
Agreed to terms : <input id="terms" type="checkbox"><br/>
</form>

<button id="btn_textbox">disable textbox</button>
<button id="btn_radio">disable radio buttons</button>
<button id="btn_checkbox">disable checkbox</button>
<button id="btn_textbox_enable">enable textbox</button>
<button id="btn_radio_enable">enable radio buttons</button>
<button id="btn_checkbox_enable">enable checkbox</button>

<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {

$("#btn_checkbox").click(function(){
$("#terms").prop("disabled", true);

});

$("#btn_radio").click(function(){
$(".gender").prop("disabled", true);

});

$("#btn_textbox").click(function(){
$("#myTextbox").prop("disabled", true);

});

$("#btn_checkbox_enable").click(function(){
$("#terms").prop("disabled", false);

});

$("#btn_radio_enable").click(function(){
$(".gender").prop("disabled", false);

});

$("#btn_textbox_enable").click(function(){
$("#myTextbox").prop("disabled", false);

});

});
</script>

</body>
</html>


In order to test this program, you can copy and paste this code into an HTML file and just open the file in browser and you will see it in action. You can also use online tools like jsfiddle to run this code, it will look like this:

how to use jsfiddle to run HTML And Javascript


and when you click run you will see following screen:


How to enable/disable form elements using jQuery? Example Tutorial


That's all about how to enable/disable form elements using jQuery. Remember to use prop() function to change disabled property if you are running on jQuery 1.6 or higher version. Some people also remove disable attribute to enable the element, don't do that because they you cannot enable them using prop(). Instead of removing just set disable=false, it will have same effect.

Other jQuery tutorials and articles you may like
  • 5 Books to learn jQuery for Web developers (books)
  • How to get the current URL, Parameters, and Hash using jQuery? (solution)
  • jQuery Hello World Example (program)
  • How to use more than one jQuery UI DatePicker on the JSP page? (example)
  • How to create tab-based UI using jQuery? (example)
  • How to redirect a page URL using jQuery and JavaScript? (solution)
  • How to write HelloWorld in jQuery? (solution)
  • 20 jQuery Interview Questions for Java Web Developers (list)
  • How to load jQuery on a web page? (solution)
  • How to use multiple jQuery Date picker element in one HTML page? (answer)
  • How to modify multiple elements in one go in jQuery? (example)
  • 10 Examples of jQuery selectors for Web Developers (tutorial)
  • How to redirect web page using jQuery code? (answer)
  • 3 Ways to parse HTML using JSoup in Java? (solution)
  • How to prevent double submission of POST data using JavaScript? (solution)
  • How to check and uncheck checkboxes using jQuery? (tutorial)

Reference
https://api.jquery.com/

Thanks for reading this article so far. If you like this jQuery tutorial then please share it with your friends and colleagues. If you have any questions or feedback then please drop a comment.

P. S. - If you want to learn jQuery in depth and looking for resources then you can also checkout this list of best jQuery online courses for beginners. In that list, I have shared my favorite online courses to learn jQuery in detail.

By javin paul
Labels: HTML and JavaScript , JQuery

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )