我有一个父级复选框和多个子级。当我选择顶级父级时，也会像我期望的那样选择子级。但是，其他父母的所有子女也都接受了检查。我希望它在不检查下一个子级的情况下在下一个父级停止。
$(".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>
答案 0 :(得分：1)
好吧，我认为可以更改布局，但考虑到您的评论是不可能的（没有该布局，代码可以大大简化）。
您正在使用nextAll方法来获取以下兄弟姐妹，其中包括所有兄弟姐妹（还包括ParentsourcefileCheckBox兄弟姐妹）。
只需通过nextUntil方法进行更改，它将停止在您指定的选择器中。
更改此：
rowWithInput = myRow.nextAll(":has('.ChildsourcefileCheckBox')")
通过这个：
rowWithInput = myRow.nextUntil(
":has('.ParentsourcefileCheckBox')",
":has('.ChildsourcefileCheckBox')"
)
这里您对更改有相同的提琴（我已经简化了一些代码）：
$(".ParentsourcefileCheckBox").click(function() {
var search = "input[type=checkbox][name=sourcefileCheckBox]",
myRow = $(this).closest("tr"),
ischecked = myRow
.find(search)
.is(":checked"),
rowWithInput = myRow.nextUntil(
":has('.ParentsourcefileCheckBox')",
":has('.ChildsourcefileCheckBox')"
);
rowWithInput
.find(search)
.prop({
"checked": ischecked,
"disabled": ischecked
});
});<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>