Home » JavaScript » jQuery » jQuery Enable/Disable Example

About Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

jQuery Enable/Disable Example

The aim of this example is to show you how to enable/disable the html elements by using jQuery. In some cases, we need to enable or disable a HTML element. This will help us to allow/prevent the user from doing some actions.

jQuery provides very simple code to enable/disable any HTML element. The following code is used respectively for this purpose.

.prop('disabled', false);
.prop('disabled', true);

Let’s look at some examples. To download the jQuery library, click here.

1. HTML

First of all you need to create a simple html document.

jQueryEnableDisableExample.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Enable/Disable Example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>

</body>
</html>

2. jQuery Enable/Disable Examples

2.1 Enable/Disable Submit Button

Let’s add the following simple html code.

First Name: <input type="text" id="firstName"/><br/>
<input  type="submit" id="submitButton" value="submit"/>

As you can notice in the following javascript code, Setting disabled property to true will disable the HTML element.In the other side, Setting it to false will enable the HTML element.

<script type="text/javascript">
$(document).ready(function() {
	 $('input[type="submit"]').prop('disabled', true);
	 
	 $( "#firstName" ).keyup(function() {
			if(this.value!=''){
				$('input[type="submit"]').prop('disabled', false);
			}else{
				$('input[type="submit"]').prop('disabled', true);
			}
	 })
});
</script>

The result in the browser would be:

Enable/Disable Submit Button

Enable/Disable Submit Button

2.2 Enable/Disable Form Input Fields

Let’s add the following simple html code.

First Name:<br/><input type="text" id="firstName"/><br/><br/>
Last Name:<br/><input type="text" id="lastName" /><br/><br/>
Age:<br/><input type="text" id="age" /><br/><br/>
<input  type="submit" id="submitButton" value="submit"/>

The following simple code is used for enabling/disabling the html elements.

<script type="text/javascript">
$(document).ready(function() {
     $('input[type="submit"]').prop('disabled', true);
     $('#lastName').prop('disabled', true); 
     $('#age').prop('disabled', true);
	 
     $( "#firstName,#lastName,#age" ).keyup(function() {
			var firstName = $( "#firstName" ).val();
			var lastName = $( "#lastName" ).val();
			var age = $( "#age" ).val();
			
			if(firstName!=''){
				$('#lastName').prop('disabled', false);
			}else{
				$('#lastName').prop('disabled', true);
			}
			
			if(firstName!='' && lastName!=''){
				$('#age').prop('disabled', false);
			}else{
				$('#age').prop('disabled', true);
			}
			
			if(firstName!='' && lastName!='' && age!=''){
				$('input[type="submit"]').prop('disabled', false);
			}else{
				$('input[type="submit"]').prop('disabled', true);
			}
	 })
});
</script>

The result in the browser would be:

Enable/Disable Form Input Fields

Enable/Disable Form Input Fields

2.3 Toggling Enabled/Disabled on an element

Let’s add the following simple html code.

First Name: <input type="text" id="firstName" disabled="disabled" /><br/><br/>
<a href="javascript:return 0;" onclick="toggleEnableDisable()">Enable/Disable</a>

To check if an element is enabled or disabled, we can use .is(':disabled') jQuery method. This method returns true if the element is disabled otherwise returns false.

<script type="text/javascript">
function toggleEnableDisable() {
     if($('#firstName').is(':disabled')){
		$('#firstName').css("border","1px solid #0e0e0e");
		$('#firstName').prop("disabled",false);
	 }else if($('#firstName').is(':enabled')){
		$('#firstName').css("border","");
		$('#firstName').prop("disabled",true);
	 }
}
</script>

The result in the browser would be:

Toggling Enabled/Disabled on an element

Toggling Enabled/Disabled on an element

3. Conclusion

jQuery provides very easy way to enable/disable any HTML element. By using a single line code like .prop('disabled', status);, the HTML elements can be enabled or disabled according to the second parameter. If the second parameter of this method is true, the element will be disabled otherwise it will be enabled.

4. Download

This was an example about jQuery Enable/Disable.

Download
You can download the full source code of this example here: jQuery Enable/Disable Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments