I am using one div formed of a table where I used a checkbox for parent and child checkbox. I need here when I click parent checkbox all the child checkbox should get disabled and if uncheck parent checkbox all the child checkboxes should get unchecked.
Below is the code used to show a checkbox in Div.
<div class="dxqb-tableFields-wrapper">
<div class="dxqb-table-field-checkbox dx-widget dx-checkbox dx-checkbox-checked" data-bind="dxCheckBox: { value: selectedWrapper }, click: function(surface, e) { surface.toggleSelected(); e.stopPropagation(); return true; }" tabindex="0" role="checkbox" onclick="void(0)" aria-checked="true">
<input type="hidden" name="" value="true">
<div class="dx-checkbox-container">
<span class="dx-checkbox-icon"></span>
</div>
</div>
<div class="dxqb-table-field-checkbox dx-widget dx-checkbox" data-bind="dxCheckBox: { value: selectedWrapper }, click: function(surface, e) { surface.toggleSelected(); e.stopPropagation(); return true; }" tabindex="0" role="checkbox" onclick="void(0)" aria-checked="false">
<input type="hidden" name="" value="false">
<div class="dx-checkbox-container">
<span class="dx-checkbox-icon"></span>
</div>
</div>
</div>
for time being I used two checkboxes one is parent another is the child. We can see the first checkbox having hidden field having value true means that checkbox is checked and another one is unchecked so hidden field value is false.
How can I achieve the same using jquery?