In this article, we will demonstrate how to enable and disable buttons using jQuery. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. The jQuery prop() function can be used to disable a button.
The property values can be explicitly retrieved using the prop() method. The prop() method only returns the property value for the first matching element in the set. For a property whose value hasn’t been set, or for a matched set that does not contain elements, it returns Undefined.
Syntax:
The selected element’s boolean attribute can be set to true or false using this method.
$().prop(property, value)
The function returns a boolean value. Whenever the selected element contains a boolean attribute (disabled, checked), it returns true otherwise.
$().prop(property)
What is a disabled attribute?
This is a boolean attribute that indicates the element should not be displayed. It is unusable to use an element that is disabled. You can set the disabled attribute to prevent the element from being used until another condition is met (such as checking a box).
Example: When you click the button below, the button above is disabled, and when you double click the button below, the button above is enabled. The prop is applied in this example to demonstrate how it is used correctly and how it can be applied.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body style="text-align: center;
border:2px solid green;
min-height:240px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<button id="update">
update me
</button>
<div style="margin-top:50px;">
<button id="change">
click me
</button>
</div>
<script>
$('#change').on('click', function () {
$('#update').prop('disabled', true);
}
);
$('#change').on('dblclick', function () {
$('#update').prop('disabled', false);
});
</script>
</body>
</html>
|
Output:
output
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Sep, 2021
Like Article
Save Article