In last couple of tutorials you have learned how to get all selected checkbox and radio buttons, and in this tutorial, you will learn how to enable/disable form elements using jQuery. A form element e.g. a textfield, radio buttons and checkbox, all represented using input tag can be enabled or disabled by adding an attribute called "disabled". It's similar to "checked" attribute we have seen for checkbox and radio buttons. If this attribute is not present then element is enable, but if this attribute is present then you can use disabled=true to disable the form element and disabled=false to enable the form elements as shown in our example.
Like previous example of checking/unchecking checkbox, you can use prop() jQuery function to enable/disable form element if you are running on jQuery 1.6 or higher version and attr() function if you are running on jQuery 1.5 or lower version.
jQuery example to enable/disable form elements
In this example, I have a form and there I have a textbox, two radio buttons and a checkbox. In this example, I will show you how you can dynamically enable and disable them using jQuery prop() function.
In order to demonstrate that, I have created 6 buttons, three buttons to disable text, radio and checkbox input tye and three more buttons to enable them later.
The logic to enable and disable form element is simple, just select the element and call prop( "disabled", true) to disalbe the element and prop("disabled", false) to enable the element.
Here is the complete jQuery example:
<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable Form Elements with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#enableCheckbox').click(function() {
$('#nameInput, #emailInput, #submitButton').prop('disabled', !$(this).is(':checked'));
});
});
</script>
</head>
<body>
<input type="checkbox" id="enableCheckbox" /> Enable Form Elements
<br>
<input type="text" id="nameInput" disabled>
<br>
<input type="email" id="emailInput" disabled>
<br>
<button type="submit" id="submitButton" disabled>Submit</button>
</body>
</html>
This code creates a simple HTML form with a checkbox, a text input, an email input, and a submit button. When the checkbox is checked, the text input, email input, and submit button are enabled. When the checkbox is unchecked, they are disabled.
Here's how the code works:
-
The
$(document).ready()function is used to ensure that the code runs after the DOM is loaded. -
The
$('#enableCheckbox').click()function is used to bind a click event handler to the checkbox. -
When the checkbox is clicked, the
prop('disabled', !$(this).is(':checked'))method is used to set thedisabledproperty of the text input, email input, and submit button to the opposite of the checkbox's checked state. This means that if the checkbox is checked, the elements will be enabled, and if the checkbox is unchecked, they will be disabled.
That's all about how to enable/disable form elements using jQuery. Remember to use prop() function to change disabled property if you are running on jQuery 1.6 or higher version. Some people also remove disable attribute to enable the element, don't do that because they you cannot enable them using prop(). Instead of removing just set disable=false, it will have same effect.
Other jQuery tutorials and articles you may like
- 5 Books to learn jQuery for Web developers (books)
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- jQuery Hello World Example (program)
- How to use more than one jQuery UI DatePicker on the JSP page? (example)
- How to create tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- How to write HelloWorld in jQuery? (solution)
- 20 jQuery Interview Questions for Java Web Developers (list)
- How to load jQuery on a web page? (solution)
Reference
https://api.jquery.com/category/selectors/
No comments:
Post a Comment