Learn how to enable disable button jQuery after clicking on it. get full working code of enable disable button jQuery.
Table of Contents
1: Enable Disable button jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Enable Disable button jQuery</h1>
<h2>Button will be enabled or disabled after selecting radio button.</h2>
<label>
<input type="radio" id="id_enable" name="enable_disable" value="false" checked="checked" />Enable</label>
<label >
<input type="radio" id="id_disable" name="enable_disable" value="true" />Disable
</label>
<input type="button" name="btn_show" id="btn_show" value="Submit" >
<script>
$("[name='enable_disable']").click(function (){
if($(this).val() == "true")
{
$('#btn_show').prop('disabled','disabled');
}
else{
$('#btn_show').removeAttr('disabled');
}
});
</script>
</body>
</html>
By using the above code you will be able to Enable, Disable the button jQuery.
If the user wants to enable or disable the button then he will be able to do that, sometimes you want to perform the task of enabling and disabling a button on some event. by using the above code you will be able to perform such an activity.
When the user will select enable the button will be enabled, and if the user selects the disabled radio button then the button will be disabled.
First I have written code for two radio buttons, the first is enabled and the second is disabled. after that, in the script, I used jQuery click function for getting the value of the radio button. if I get the true value from the radio button then submit button will be disabled.
if I get a false value then submit button will be enabled.
“$(‘#btn_show’).prop(‘disabled’,’disabled’);” using this line of code I am performing disable activity, and using “$(‘#btn_show’).removeAttr(‘disabled’);” this line of code I am removing disabled attribute from submit button.
As I have already mentioned that I am using the jQuery function, which is required to import the jQuery library, which I have mentioned in the head tag of the above code. if you don’t import it correctly then you will face an error in your code.
2: Button will be disabled after clicking on it jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Disable button jQuery</h1>
<h2>Button will be disabled after clicking on it.</h2>
<input type="button" name="btn_show" id="btn_show" value="Submit" >
<script>
$("#btn_show").click(function (){
$('#btn_show').prop('disabled','disabled');
});
</script>
</body>
</html>
Sometimes you want to disable the button after clicking on it using jQuery, the above code will help you in this type of situation. when the user will click on submit button the submit button will be automatically disabled.
“$(“#btn_show”).click(function (){” this code will capture click event of the user, after capturing click event I am triggering “$(‘#btn_show’).prop(‘disabled’,’disabled’);” code, which is responsible for disable the activity of button.
The code is written in jQuery, so you will need to import the jQuery library into the HTML page. which is responsible for running jQuery functions.
If you like the article, please comment with your suggestions. if you want more examples in this article then please comment I will try to add them.
More Tutorials.
### How to check radio button in jQuery by name.
### How to add and remove class in JavaScript on click
### Settimeout JavaScript | Best 9 Settimeout JavaScript Examples
### How to redirect the user from one page to another
### Hosted Libraries By google