Скачать или смотреть How to Use jQuery to Select Checkboxes in Sibling divs

Learn how to dynamically select and enable checkboxes in sibling divs using jQuery selectors, with clear examples and code snippets.
---
This video is based on the question https://stackoverflow.com/q/62333385/ asked by the user 'sjohn285' ( https://stackoverflow.com/u/8320640/ ) and on the answer https://stackoverflow.com/a/62333445/ provided by the user 'Barmar' ( https://stackoverflow.com/u/1491895/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I select a checkbox in a sibling div using JQuery selectors?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Selecting a Checkbox in a Sibling div using jQuery

When working with jQuery, you might often come across scenarios where you need to interact with elements that are part of a specific layout. One common issue developers face is how to select a checkbox in a sibling div, especially when dealing with multiple occurrences of a similar structure in an HTML document. In this guide, we’ll explore how to dynamically select a checkbox in a sibling div and remove its disabled property using jQuery.

The Problem

Consider the following HTML structure where we have two divs:

The first div (class col-6) contains an enabled checkbox.

The second div (class col-3) contains a disabled checkbox.

Here’s the relevant HTML code:

[[See Video to Reveal this Text or Code Snippet]]

Your task is to select the checkbox in the sibling div class col-3 when the checkbox in the col-6 div is clicked. The objective is to enable the disabled checkbox in col-3, all while doing this dynamically, without assigning specific classes to the checkboxes.

The Solution

To achieve this, we'll utilize jQuery selectors efficiently. Here’s how we can do it step by step.

Step 1: Identify the checkbox click event

First, we need to listen for a click event on the checkbox within the col-6 div. We can use the click() method provided by jQuery.

Step 2: Use closest() to target the parent div

To find the parent div of the clicked checkbox, we will use the closest() method. This allows us to navigate up the DOM hierarchy from the checkbox to its containing div.

Step 3: Find the sibling div

Next, we need to access the sibling div that contains the checkbox we want to manipulate. We can do this using the siblings() method.

Step 4: Enable the checkbox in the sibling div

Lastly, we will use the find() method to locate the checkbox within the sibling div and then use removeAttr("disabled") to enable it.

Complete Code Example

Putting it all together, the final jQuery code would look like this:

[[See Video to Reveal this Text or Code Snippet]]

Here’s how you would include it in your HTML:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can effectively select a checkbox in a sibling div using jQuery, and enable it dynamically based on user interaction. This method can be particularly useful for forms and user interfaces where the state of one element affects another.

Embracing jQuery for such tasks not only simplifies the code but also enhances the user experience by making forms more interactive. Give this technique a try in your next project, and you'll see how effortlessly you can manage complex DOM structures with jQuery!