Today, We want to share with you jquery disable button.In this post we will show you javascript disable button click event, hear for javascript disable button on document ready we will give you demo and example for implement.In this post, we will learn about JQuery Disable Button After Click with an example.
how to disable button in jquery
To disable a button in jQuery, you can use the prop method to set the disabled attribute of the button to true. Here’s an example code snippet:
// select the button element using a jQuery selector
var $button = $('button#myButton');
// disable the button
$button.prop('disabled', true);
In the above code, replace button#myButton with a jQuery selector that targets the button you want to disable. The $button.prop(‘disabled’, true) statement will set the disabled attribute of the button to true, which will disable the button.
If you want to enable the button again, you can use the same prop method to set the disabled attribute to false, like this:
// enable the button
$button.prop('disabled', false);
This will remove the disabled attribute from the button and allow it to be clicked again.
jquery disable button after click
Example : 1 Bootstrap Disable Enable button javascript
<html>
<head>
<title>Bootstrap Grid - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function disable(){
$("#myBtn").attr("disabled", true);
$('#myBtn').addClass('disabled');
}
</script>
</head>
<body>
<input type="button" class="btn btn-danger" onclick="disable()" id="myBtn" value="Disable Button" />
</body>
</html>
Example : 2 Enable Button
<html>
<head>
<title>Bootstrap Grid - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function enable(){
$("#myBtn").removeAttr("disabled");
$('#myBtn').removeClass('disabled');
}
</script>
</head>
<body>
<input type="button" class="btn btn-danger disaabled" disabled id="myBtn" value="Disabled Button" />
<br>
<input type="button" class="btn btn-danger " onclick="enable()" id="myBtn" value="Enable Button" />
</body>
</html>
Example : 3 How to disable a button in jQuery dialog from a function ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
.ui-widget-header {
background: green;
color: #ffffff;
}
#dialog {
box-shadow: 1rem .5rem 1rem
rgba(0, 0, 0, .15) !important;
padding: 20px;
}
</style>
</head>
<body>
<div id="dialog" title="jQuery UI Basic dialog">
<p>
TamilRockers New Link 2020: Want to know the way to get Tamilrockers New link ? or Tamilrockers Latest URL? it’s a simple trick 2019 by using a simple way. however before gathering Tamilrockers New link knowing little about Tamilrockers is Important. TamilRockers New Website 2020.
</p>
<button type="button" class=
"ui-button ui-widget" title="Close">
Close
</button>
</div>
<script>
$(function() {
// Trigger click dialog cart-data
$("#dialog").dialog();
// attr() method applied here
$(".ui-button").prop('disabled', true);
});
</script>
</body>
</html>
I hope you get an idea about javascript enable button by id.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.