In this tutorial we will learn how to Disable Button after Click with jQuery. We can use jQuery prop() method, click() method and disabled property to disable the button after click.
Table of Contents
prop() method
jQuery prop() method sets or returns the properties and values of the selected HTML tag or element.
In this example prop() method is used to set disabled property value to true.
click() method
jQuery click() method binds the click event with execution of code or it triggers the click event for the HTML element.
In this example click() method is used to run a code on click of a button tag.
disabled property
disabled property is a Boolean property which disables or enables the HTML element.
If disabled property is set to true then it will disable the HTML tag.
HTML Code
HTML Code is given below, in this code we have a button tag with a defined id.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Disable Button after Click</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">Disable Me!</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to tie the execution of code with click event of button tag.
prop() method is used to set the value of disabled property to true which will disable the button tag.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#btn').prop("disabled","true");
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Disable Button after Click with jQuery.