Disable / Enable button using jQuery

Hey Guys, Today i am going to share with you one small but important tutorial.Last week, i was working with one of my project and i had a task to fetch data using one API and use that data for load signing page in iframe. Everything was working smoothly but somehow if someone click on the signing button without loading a full page, an error occurred. Therefore i use a little trick and disable that button using jQuery until page does not fully load. The disabled button will automatically enable using jQuery whenever page is fully loaded. Here check it how i made it possible using jQuery.

Index.html

<!DOCTYPE html>
<html>
<head>
	<title> Enable Disable Button Using Jquery | CodeandTuts </title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<!-- Script for Bootstrap JS -->
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<center><h2>Enable Disable Button Using Jquery</h2></center>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-md-12">
				<center>
					<button class="btn btn-primary" id="button1">Button1</button>
					<br/><br/>
					<button class="btn btn-primary" id="button2">Enable Button1</button>
					<button class="btn btn-primary" id="button3">Disable Button1</button>
				</center>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
$("#button2").click(function(){
	$("#button1").prop("disabled",false);
});

$("#button3").click(function(){
	$("#button1").prop("disabled",true);
});

$("#button1").click(function(){
	alert("I am enable now.");
});
</script>
</html>

You can use this code for disable submit button after form is submitted or any other purpose. Keep in mind that jQuery and JavaScript are very good for handling various task on client side. Thanks for reading this tutorial. I hope that you may like this tutorial. Please do share with your friends. Happy Coding 🙂

Related:  Preview (Thumbnail) Image before upload using jQuery

About Chintan Panchal

I am web developer having 4+ year of experience of web development. I have worked on codeigniter, symfony, laravel and wordpress.

View all posts by Chintan Panchal →

Leave a Reply

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

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