jquery disable button

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.

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.