I have a parent checkboxes and children. When I select the top level parent, the children also are selected as I would expect. However, all the children of the other parents also are checked. I would like it to stop at the next parent without the next level children being checked.
$(".ParentsourcefileCheckBox").click(function() {
var Titletextbox = $(this)
.closest("tr")
.find("input[type=checkbox][name=sourcefileCheckBox]")
.val();
var myRow = $(this).closest("tr"),
rowWithInput = myRow.nextAll(":has('.ChildsourcefileCheckBox')"),
val = rowWithInput.find(".ChildsourcefileCheckBox").val();
if (
$(this)
.closest("tr")
.find("input[type=checkbox][name=sourcefileCheckBox]")
.is(":checked")
) {
rowWithInput
.find("input[type=checkbox][name=sourcefileCheckBox]")
.prop("checked", true);
rowWithInput
.find("input[type=checkbox][name=sourcefileCheckBox]")
.attr("disabled", true);
} else {
rowWithInput
.find("input[type=checkbox][name=sourcefileCheckBox]")
.prop("checked", false);
rowWithInput
.find("input[type=checkbox][name=sourcefileCheckBox]")
.attr("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;height: 100%;">
<tbody id="secondtbody">
<tr name="myRow">
<td style="width: 100%;">
<div class="checker" id="uniform- CheckBox">
<span>
<input
title="Select All Bookmarks"
class="styled"
id="CheckBox"
type="checkbox"
permission="0"
/>
</span>
</div>
<span>Select All</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="LEAD Technologies" permission="0" />
<span>LEAD Technologies</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="About LEAD Technologies" permission="0" />
<span>About LEAD Technologies</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Fast Facts" permission="0" />
<span>Fast Facts</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Developer Tools" permission="0" />
<span>Developer Tools</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Imaging Applications/Utilities" permission="0" />
<span>Imaging Applications/Utilities</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ParentsourcefileCheckBox" id="checkBox" type="checkbox" value="Why Use LEADTOOLS" permission="0" />
<span>Why Use LEADTOOLS</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="Time-Tested" permission="0" />
<span>Time-Tested</span>
</td>
</tr>
<tr name="myRow">
<td style="width: 100%;">
<input name="sourcefileCheckBox" class="ChildsourcefileCheckBox" id="checkBox" type="checkbox" value="One SDK Vendor Who Does it All!" permission="0" />
<span>One SDK Vendor Who Does it All!</span>
</td>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire