Родительский флажок перебирает сначала детей, затем останавливается

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>