How To Disable Checkbox In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of how to disable checkbox in jQuery, the checkbox element can be made disabled or grayed out using a variety of methods offered by jQuery, and this attribute indicates whether the checkbox should really be disabled or not.
Prop() function use
$ (selector). Properties: ("disabled," true | false);
The selected element with checkbox objects is disabled is if the corresponding parameter used by the prop() function was set to true; otherwise, if a parameter is set to false, the select component or checkbox objects isn't actually disabled.. This function returns a Boolean value.
Step By Step Guide On How To Disable Checkbox In jQuery :-
<html>
<head>
<title> TalkersCode disable checkbox </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('input0').change(function() {
var val = $(this).val();
if (val == "1") {
$("input[value='2']").prop("disabled", $(this).is(":checked"));
} else if (val == "2") {
$("input[value='1']").prop("disabled", $(this).is(":checked"));
}
});
});
</script>
</head>
<body>
<form>
<p> First checkbox </p>
<input type="checkbox" name="product[]" value="1">
<p> Second Checkbox </p>
<input type="checkbox" name="product[]" value="2">
</form>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed and head closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- As observed, they are utilizing jQuery's prop() function to disable the checkbox.
- In this example, we've first created a function called ".change" where we're defining a value that accepts the same result as obtained and checking with both the checkbox order since we've named two checkboxes first and second checkbox, but when we're comparing them, we've identified also every checkbox to that same value as "a" and "b," including both.
- Then, to use the prop() function, users declare the value as "disabled" if either checkbox is confirmed. This indicates that we're comparing the value in this case while utilizing the prop() function.
- As you can see, there must be two checkboxes that are both unchecked in the first screenshot. In the second, you can see that you first checked the "first checkbox," that also causes the second checkbox to become disabled. In the third, you can see that you checked the second checkbox, which causes the first checkbox to become disabled.
Conclusion :-
jQuery's definition of checkbox disabling is to disable the checkbox element, which grays out the checkbox component and can still be checked as well as unchecked once it's disabled, using one of several available methods, including the prop() and attr() methods and the.disabled property, which can be applied to checkbox objects.
I hope this article on how to disable checkbox in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
