How To Disable A jQuery Button Initially and After User Action
If you’re familiar with the jQuery button widget, you know that it’s much more than just a button — it adds functionality and graphic themes to a variety of input types, as well as standard HTML buttons. In this post, we’re going to show you how to use both the disabled option and the disable() method to disable a jQuery button.
If you’re interested in becoming a professional web developer or doing any kind of web-related programming, there are many excellent online courses in jQuery and JavaScript. Look into them today!
A Word Or Two About jQuery
Doesn’t the world of software and web development seem like alphabet soup sometimes? With so much jargon, and so many acronyms and neologism, it can be hard to find your way around. But jQuery is actually pretty easy to understand. It’s basically a library of code (one big JavaScript file, as a matter of fact) that adds some very nice features to standard JavaScript — for the most part, things that go on in the user’s browser window (rather than on the server).
Using jQuery
jQuery is also open-source and downloadable. You can use it either by linking to a local copy, or to one of the online installations which are available for public use (including those hosted by Google, Amazon, and Microsoft). The link consists of a line of <script> in the <head> section of your HTML page, like this:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
The syntax for using jQuery command is also pretty simple:
$("select_an_element").do_something_with_it(arguments, functions, etc.);
The “select_an_element” part can be any of several selectors, individually or in combination — they’re just jQuery commands that identify the HTML elements (things like <p>,<div>, or individual elements by ID). The “do_something_with_it” part is typically a jQuery method, and the arguments and functions are generally optional.
In the examples shown here, by the way, we’ll generally place the jQuery code within the function part of the jQuery ready() method, like this:
$(document).ready(function(){...});
This just checks to see if the document’s ready before running the rest of the jQuery code. Most of the time, it’s a matter of style, rather than necessity, but there are situations where it could be important.
Button, Button…
Now, about that jQuery button. The first thing that you need to know is that button() is actually a jQuery UI widget — rather than being a part of the standard jQuery library, it’s part of the jQuery UI library, a library of largely theme-based user-interface and visual effects (which is also open-source, and maintained by the jQuery Foundation). In practice, this means that you add two more links to your HTML page, to link to the UI library, and to the theme that you’ll be using:
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Typically, you’d use a local copy of the theme, tailored to your needs; for the demos here, we link to the default “Smoothness” theme.
…You’ve Got The Button
jQuery UI widgets are a lot like standard jQuery methods, which in turn are a lot like standard JavaScript methods. A typical jQuery widget has its own set of options, methods, and events, involving its formatting and functionality. The button() widget replaces standard HTML buttons, radio buttons, checkboxes, and other input types with graphically-sophisticated, theme-formatted buttons, along with an associated set of visual and functional controls.
To apply a button widget to an HTML element, you select the element, then apply the widget as if it were a jQuery method, like this:
$( "#info" ).button();
All we’ve done is identify the button by its ID, “info” (assigned when we created the button in the HTML code), and told jQuery to use the button() widget. That’s enough to turn “info” into a jQuery UI button.
Disable That Button!
There are times when you need to disable a button — if, for example, it should only be enabled after certain conditions have been met, or if it should be actively disabled in response to the user’s input.
jQuery UI includes two ways to disable the button() widget: the disabled option allows you to initialize the button in a disabled state, while the disable() method allows you to disable in response to events after the button has been initialized (the enable() method allows you to enable the button in a similar manner).
Button Not Available
The following example uses the disabled option to create a button that is disabled from the start, and can be enabled by the user:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#install_it" ).button({disabled:true});
$("#i_agree").button().click(function(){
$( "#install_it" ).button("enable");
});
});
</script>
</head>
<button id="i_agree">I agree to the terms of use.</button><br><br>
<button id="install_it">Install the software.</button>
</html>
When the page opens, the “I agree to the terms of use.” button is enabled, and the “Install the software.” button is disabled. If the user clicks the “I agree…” button, the “Install…” button becomes enabled.
How It Works
We use standard HTML to create both buttons. This line applies the button() widget to the “Install…” button with the disabled option set to true.
$( "#install_it" ).button({disabled:true});
Note that if we didn’t use any argument for button(), it would be enabled by default, as is the “I agree…” button in the following code:
$("#i_agree").button().click(function(){
$( "#install_it" ).button("enable");
});
Clicking on the “I agree…” button applies the enable() method to the “Install…” button.
On And Off
It’s time to step up our game a little. The following code turns buttons on or off, depending on the user input:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#login" ).button({disabled:true});
$( "#register" ).button({disabled:true});
$( "#info" ).button();
$("#member").click(function(){
$( "#login" ).button("enable");
$( "#register" ).button("disable");
});
$("#not_member").click(function(){
$( "#login" ).button("disable");
$( "#register" ).button("enable");
});
});
</script>
</head>
<input type="radio" name="status" id="member" value="member">I am a member.
<input type="radio" name="status" id="not_member" value="not_member">I am not a member.<br>
<button id="login">Log In</button> <button id="register">Register</button>
<button id="info">Info</button>
</html>
It creates two standard HTML radio buttons, and three button elements, to which we apply the button() widget. When they are initialized, both the “Log In” and “Register” buttons are disabled. If the user selects “I am a member.”, the “Log In” button is enable, and the “Register” button is disabled (if it has become enabled). If the user selects “I am not a member.”, “Log In” is disabled, and “Register” is enabled. The user can switch back and forth, enabling and disabling the appropriate buttons each time. (The “Info” button is initialized as enabled by default, and remains enabled, since it should be available to both members and non-members.
There are a lot of opportunities in web programming and web development, using jQuery, JavaScript, and other programming environments. Take a look at some of the JavaScript, jQuery, and web development courses that are available online; we think you’ll like what you see.
Recommended Articles
Featured course
Last Updated April 2021
jQuery Hands-On Practical Course! Learn jQuery from Basics & Create 20 amazing real-world jQuery Projects | By Crypters Infotech
Explore CoursejQuery students also learn
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.