Materializecss复选框嵌套在collapsible中

Question

我需要请你帮忙帮我解决Materializecss折叠中的嵌套复选框。我有以下代码：

vehicle.component.html

<ul class="collapsible" data-collapsible="accordion">
  <li *ngFor="let items of fleets">
    <div class="collapsible-header"> <i class="material-icons">airport_shuttle</i>
      <input type="checkbox" id="{{items.id}}" />
      <label for="{{items.id}}">{{ items.nameFleet }}</label>
    </div>
    <div class="collapsible-body">
      <ul>
        <li *ngFor="let item of items.vehicles">
            <input type="checkbox" id="{{item.id}}" />
            <label for="{{item.id}}">{{item.nameVehicle}}</label>
        </li>
      </ul>
    </div>
  </li>
</ul>

index.js

$('input[type=checkbox]').click(function () {
  if (this.checked) {
    $(this).parents('li').children('input[type=checkbox]').prop('checked', true);
  }
  $(this).parent().find('input[type=checkbox]').prop('checked',this.checked);
});

我遇到的问题是，当我点击任何主要复选框时，我不认识这些家属。

提前感谢您的帮助