Mark Previous Check (Parent) to Node

Question

What I need is that when selected Item "Ball" which is a child node of check "1031-HUBCAP ...", the Father node is selected as well. Or Do not let select the child node if the parent node is not selected.

<table class="table table-bordered">
<thead>

    <tr>
        <th scope="col">Peça</th>
    </tr>
</thead>
<tbody>

    @{
        for (int i = 0; i < ViewBag.Lista.Count; i++)
        {
            <tr>
                @if (ViewBag.Lista[i].TemPeca > 0)
                {
                <td>
                    @if (ViewBag.Lista[i].ACHOU == "N")
                    {
                        <input type="text" name="optionsObsPeca[]" value="@ViewBag.Lista[i].Obs" autocomplete="off" />
                        <input type="checkbox" name="options[]" id="id[]" value="@ViewBag.Lista[i].Id" checked />


      @ViewBag.Lista[i].Descricao
                    }
                    else // ITENS
                    {
                        <p>
                            &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp;  &nbsp;
                            <input type="checkbox" name="optionsItens[]" att="@ViewBag.Lista[i].Id" value="@ViewBag.Lista[i].IdItem" />
                            @ViewBag.Lista[i].DescricaoItem
                        </p>
                    }

                </td>
                }
                else
                {
                    <td>
                        @if (ViewBag.lista[i].ACHOU == "N")
                        {
                            <input type="text" name="optionsObsPeca[]" value="" autocomplete="off" />
                            <input type="checkbox" name="options[]" id="id[]" value="@ViewBag.Lista[i].Id" />
                            @ViewBag.Lista[i].Descricao
                        }
                        else // ITENS
                        {
                            <p>
                                &nbsp; &nbsp; &nbsp;
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
                                <input type="checkbox" name="optionsItens[]" att="@ViewBag.Lista[i].Id" value="@ViewBag.Lista[i].IdItem"  />
                                @ViewBag.Lista[i].DescricaoItem
                            </p>
                        }
                    </td>
                }
            </tr>

            cont++;
        }
    }
</table>

Answer 1

Following in your structure you can do something like the example below. Thus the main option when clicked interacts with all your children and if there is no child selected the main will be unchecked too.

$(document).ready(() => {

  $('input[name="options[]"]').click(function() {
    let pai = $(this).parents('td');
    $(pai)
      .children('p')
      .children('input[type="checkbox"]')
      .prop("checked", $(this).prop('checked'));
  });

  $('input[name="itemOptions[]"]').click(function() {

    let pai = $(this).parents('td');
    let itensMarcados = $(pai)
      .children('p')
      .children('input[type="checkbox"]:checked')
      .length;

    pai.children('input[name="options[]"]')
      .prop("checked", itensMarcados > 0);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="options[]" id="opcao a"> Frutas
      <p>
        &emsp;<input type="checkbox" name="itemOptions[]" value="">  Melão
        <br> &emsp;
        <input type="checkbox" name="itemOptions[]" value="">  Melância
        <br> &emsp;
        <input type="checkbox" name="itemOptions[]" value="">  Laranja
        <br>
      </p>
    </td>
  </tr>
</table>

Answer 2

Searching for the checkbox that is in the same cell by name, using .closest and .find() you can mark, but it does not make sense these id’s with brackets, even because you are repeating them, which is incorrect.

Code:

$('[name="optionsItens[]"]').on("change", function(){
   if($(this).is(":checked")){
      $(this)
      .closest("td")
      .find('[name="options[]"]')
      .prop("checked", true);
   }
});

Example:

$('[name="optionsItens[]"]').on("change", function(){
   if($(this).is(":checked")){
      $(this)
      .closest("td")
      .find('[name="options[]"]')
      .prop("checked", true);
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<table class="table table-bordered">
<thead>

<tr>
  <th scope="col">Peça</th>
</tr>
</thead>
<tbody>

      <tr>
          <td>
                  <input type="text" name="optionsObsPeca[]" value="@ViewBag.Lista[i].Obs" autocomplete="off" />
                  <input type="checkbox" name="options[]" id="id[]" value="@ViewBag.Lista[i].Id" />
                  <p>
                      &nbsp; &nbsp; &nbsp;
                      &nbsp; &nbsp; &nbsp;  &nbsp;
                      <input type="checkbox" name="optionsItens[]" att="@ViewBag.Lista[i].Id" value="@ViewBag.Lista[i].IdItem" />
                      @ViewBag.Lista[i].DescricaoItem
                  </p>

          </td>
              <td>
                      <input type="text" name="optionsObsPeca[]" value="" autocomplete="off" />
                      <input type="checkbox" name="options[]" id="id[]" value="@ViewBag.Lista[i].Id" />
                      <p>
                          &nbsp; &nbsp; &nbsp;
                          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
                          <input type="checkbox" name="optionsItens[]" att="@ViewBag.Lista[i].Id" value="@ViewBag.Lista[i].IdItem"  />
                          @ViewBag.Lista[i].DescricaoItem
                      </p>
              </td>
      </tr>
</table>