Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Enable/Disable Buttons using jQuery?
In addition to event handling, CSS animation, and Ajax, jQuery is a lightweight JavaScript framework intended to make it easier to traverse and manipulate the HTML DOM tree. It is renowned for following the "write less, do more" adage. Developers use a variety of tools and features with jQuery to alter HTML files, handle AJAX calls, manage events, and create animations.
We will use the prop() function and the attr() function to enable or disable the button in JQuery.
Approach −1 : Enable the button when a condition is fulfilled
In this example, we will see how to enable the button when the radiobox is selected.
Algorithm
Step 1: Import jQuery scripts via script tag.
Step 2: Define radiobox and val() function to get radiobox’s state.
Step 3: Pass a function to on() function to check the current state of the radio button.
Step 4: Use the prop() function to change the state of the button.
Syntax
$('#myButton').prop('disabled', false);
In the following example, the prop function is used to set the disabled attribute value of the button with id ‘myButton’ which in this case is false.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable/ Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Select Option 1 to enable the button</h3>
<div>
<input type="radio" name="Option" value="Option 1" id="option1">Option 1 </input>
<input type="radio" name="Option" value="Option 2" id="option2">Option 2 </input>
<input type="radio" name="Option" value="Option 3" id="option3">Option 3 </input>
</div>
<button type="button" id="myButton" disabled>Toggle Button</button>
<script>
$("input[type='radio']").on("click", function(){
if($("#option1").is(':checked')){
$("#myButton").prop("disabled", false);
}else{
$("#myButton").prop("disabled", true);
}
});
</script>
<style>
body{
background-color: #8a2be2;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
}
h3{
background-color: cadetblue;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
div{
margin-top: 20px;
margin-bottom: 50px;
padding-left: 30px;
}
#myButton{
/* margin-left: 5%; */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 75px;
padding-right: 75px;
border-radius: 15px;
margin-left: 30px;
}
</style>
</body>
</html>
In this example, we check for each click on radio button input. If option1 radio button is selected which is checked in if condition though .is(“:checked”), then disabled prop is removed using prop() function else the button is disabled.
Approach 2: Unlocking the button when input condition is satisfied.
In this approach, we will see how to enable the button when the input text field is not empty.
Syntax
$('#myButton').attr('disabled', true);
In this snippet, the attr function is used to set the disabled attribute value of the button with id ‘myButton’ which in this case is true.
Algorithm
Step 1: Import jQuery scripts via script tag.
Step 2: Define a text input component using input tag.
Step 3: Check if the input field is empty or not
Step 4: If the input field is not empty then enable the button else keep it disabled.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable/ Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Enter something to enable the button</h3>
<div>
<input type="text" name="username" id="username" />
</div>
<button type="button" id="myButton" disabled>Toggle Button</button>
<script>
$("input[type='text']").keyup(function(){
if($("#username").val() !== ""){
$("#myButton").attr("disabled", false);
}else{
$("#myButton").attr("disabled", true);
}
});
</script>
<style>
body{
background-color:chocolate;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
}
h3{
background-color:burlywood;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
div{
margin-top: 20px;
margin-bottom: 50px;
padding-left: 30px;
}
input[type='text']{
padding-top: 20px;
padding-bottom: 20px;
width: 330px;
padding-left: 20px;
font-size: xx-large;
}
#myButton{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 140px;
padding-right: 140px;
border-radius: 15px;
margin-left: 30px;
}
</style>
</body>
</html>
In this code, we saw how to enable buttons using attr() function. First we checked if the text input was empty or not using the val() function which returns the current value of the text input field. If it is empty we keep disabled attribute true and vice versa.
Conclusion
jQuery offers a quick and efficient solution to activate or deactivate buttons on a web page depending on user input and other factors. Users can't click on a button unless the necessary circumstances are satisfied by changing the disabled property of the button element using the prop() and attr() function. Through fewer errors and real−time feedback, this can enhance the user experience.
In addition, jQuery provides a variety of other features and capabilities that may be used to enhance the responsiveness and interactivity of web pages. These capabilities vary from managing form submissions and AJAX queries to producing animations and effects. By mastering the basics of jQuery and exploring its capabilities, you can unlock a world of possibilities for creating engaging and dynamic web pages that delight user experience.
1K+ Views
