家长复选框通过第一个孩子迭代，然后停下来

Question

我有父母的复选框和孩子。当我选择顶级父母时，还可以按照我的期望选择孩子。但是，还检查了其他父母的所有孩子。我希望它停在下一个父母的情况下，而没有检查下一个孩子。

$(".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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;
        <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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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>

Answer 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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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%;">
        &nbsp;&nbsp;&nbsp;<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>