How to Enable Disable Checkbox based on Another Checkbox Using jQuery? | Code Snippet #23

14 Feb , 2014  Code Snippets 

Enable Disable CheckboxCode Snippet #23: The code snippet we are going to see today shows how to enable disable checkbox based on another checkbox selection using jQuery.

In our previous code snippet, we just saw how to create a mult-level drop down checkboxes based on a parent checkbox. Today, we are going to see how to enable and disable a checkbox based on a master checkbox using jQuery. Already, we have seen the code snippet to enable and disable submit button on text area via jQuery.

The code snippet to enable disable checkbox is easy to learn and understand. The logic can be changed to suit your needs and requirements as per your project or development. Hope you find this code snippet useful.

Find the live demo below: (Initially one checkbox is disabled) 

HTML:

jQuery:

Explanation:

Initially, we create two checkbox. One is enabled and the other is disabled. The second disabled checkbox is our target checkbox which enables and disables based on the first checkbox.

In jQuery, we check for a click event. When the first checkbox is clicked, then we get the value of the 1st checkbox. And in a if loop, we test when the value is equal to 1 then prop the disabled checkbox to enable. You can also enable that checkbox and disable it again. Check the demo for a better understanding.

Hope you enjoyed this simple code snippet. We will get more such code snippets soon.



, ,

Comments are closed.