jQuery - Disable Button After Click using jQuery

In this code snippet we will learn how to disable button after click using jQuery. With the help of this method we can prevent button to click after submitting form etc.

jQuery Code Snippet - Disable Button after Click using jQuery

jQuery/JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$("#btnSubmit").click(function(){
			$("#btnSubmit").prop('disabled',true);
		});
	});
	<!--JS function to display alert message-->
	function dispAlert(){
		alert("Button disabled.");
	}
</script>

HTML Source Code with jQuery/JavaScript

<!--jQuery - Disable Button After Click using jQuery.-->
<html>
	<head>
		<title>jQuery - Disable Button After Click using jQuery.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btnSubmit").click(function(){
					$("#btnSubmit").prop('disabled',true);
				});
			});
			<!--JS function to display alert message-->
			function dispAlert(){
				alert("Button disabled.");
			}
		</script>
	</head>
	<body>
		<h1>jQuery - Disable Button After Click using jQuery.</h1>
		<p><input type="button" value="Submit" id="btnSubmit" onclick='dispAlert()'/></p>
	</body>
</html>

jQuery - Disable Button After Click using jQuery

jQuery Code Snippet - Disable Button after Click using jQuery

jQuery/JavaScript

HTML Source Code with jQuery/JavaScript

Result