Disable all other top level checkboxes when one parent checkbox is selected

Question

How do you disable the top-level parent checkboxes when one top level checkbox has been checked?

Basically, I want the top level checkboxes to behave like radio buttons and the children to behave like normal checkboxes.

I can not swap out the top-level checkboxes for radio buttons in this case.

Currently, my implementation disables all checkboxes regardless if a parent or child box is checked.

$('li > label > input[type="checkbox"]').click(function () {
    var parent_id = $(this).parent().parent("[data-id]").data("id");
    
    // problem area

    if (this.checked) {
        $("input:checkbox").each(function () {
            $(this).prop("checked", false);
        });
        $(this).prop("checked", true);
    }
    

    $('li > label > input[type="checkbox"]').each(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().find("ul.children").show();
        } else {
            $(this).parent().parent().find("ul.children").hide();
            uncheckChildren(parent_id);
        }
    });
});

function uncheckChildren(parent_id) {
    $('[data-id="' + parent_id + '"]')
        .find("ul.children li label input")
        .prop("checked", false);
}

<div class="categorychecklist-holder">
  <ul class="acf-checkbox-list acf-bl">

    <li data-id="10">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="10">
        <span>Dine</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="371">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="371">
            <span>Brunch</span></label>

        </li>

        <li data-id="370">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="370">
            <span>Casual</span></label>

        </li>
      </ul>
    </li>

    <li data-id="7">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="7">
        <span>Do</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="372">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="372">
            <span>Gallery</span></label>

        </li>

        <li data-id="373">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="373">
            <span>Museum</span></label>

        </li>
      </ul>
    </li>

    <li data-id="6">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="6">
        <span>Shop</span></label>

    </li>

    <li data-id="13">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="13">
        <span>Stay</span></label>

    </li>
  </ul>
</div>

ul.children {
  display: none;
}

Answer 1

Please check the Code below. I am sorry for my earlier post. I made a mistake. I hope it may work the way you want.
HTML:

    <li data-id="10">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="10" class="parent-check">
        <span>Dine</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="371" >
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="371" class="childcheck">
            <span>Brunch</span></label>

        </li>

        <li data-id="370">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="370" class="childcheck">
            <span>Casual</span></label>

        </li>
      </ul>
    </li>

    <li data-id="7">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="7" class="parent-check">
        <span>Do</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="372">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="372" class="childcheck">
            <span>Gallery</span></label>

        </li>

        <li data-id="373">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="373" class="childcheck">
            <span>Museum</span></label>

        </li>
      </ul>
    </li>

    <li data-id="6">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="6">
        <span>Shop</span></label>

    </li>

    <li data-id="13">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="13">
        <span>Stay</span></label>

    </li>
  </ul>
</div>

Jquery:

$('li > label > input[type="checkbox"]').click(function () {
    var parent_id = $(this).parent().parent("[data-id]").data("id");
    
    // problem area

    if (this.checked) {

      if($(this).hasClass("childcheck")){
      console.log("sdsd")
        $("input:checkbox").not(this).closest("li").hasClass("parent-check").prop("checked", false)
      }
      else {
      $("input:checkbox").each(function () {
            $(this).prop("checked", false);
        });
      }
        
        $(this).prop("checked", true);
    }
    

    $('li > label > input[type="checkbox"]').each(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().find("ul.children").show();
        } else {
            $(this).parent().parent().find("ul.children").hide();
            uncheckChildren(parent_id);
        }
    }); 
});

function uncheckChildren(parent_id) {
/*      let childLength = $(this).closest("li").find(".childcheck").length;
                 if(childLength > 0) {
        
               }
            $('[data-id="' + parent_id + '"]').find("ul.children li label input").prop("checked", false); */
}

CSS:

ul.children {
  display: none;
}