I have a div class called expandInnerDivStyle that I want to prevent clicks inside of. To achieve this, I am using the following code:
$(".expandInnerDivStyle").css({pointerEvents: "none"});
However, there may be nested divs with the same class within this div. Now, I need to allow clicks for these nested divs with the same class.
My requirement is as follows: I have a collapsible header div with the class name expandInnerDivStyle. When clicked, I want to disable all form elements inside it, but before disabling them, I need to check if there are any nested headers that contain the same expandInnerDivStyle class.
Upon clicking, I need to verify if the nested header has this class. If so, it should be enabled (so I can click on it to see the form elements), but the form elements of the nested header should be disabled.
Here is an example scenario:
<div class="expandInnerDivStyle"> Disable this.
<div class="parent abc"></div> Disable this.
<div clas="expandInnerDivStyle"> Need to enable clicks(Nested Class)
<div class="child mno"></div> Disable this.
<div class="child mpqr"> Disable this.
<div clas="expandInnerDivStyle">Need to enable clicks(Nested Class)
<button/> Disable this.
</div>
</div>
</div>
<div class="parent hhh"></div> Disable this.
</div>
Can anyone help me with this? Thank you.