Materialize中的嵌套复选框

Question

我正在尝试使用Materializejs制作嵌套的复选框。问题是，当我选中折叠的外部复选框时，内部复选框会再次打开。 这是我的代码：

                <ul class="collapsible">
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">arrow_drop_down</i>
                            <label>
                                <input type="checkbox" class="filled-in" />
                                <span>Filled in</span>
                            </label>
                        </div>
                        <div class="collapsible-body">
                            <i class="material-icons">arrow_drop_down</i>
                            <label>
                                <input type="checkbox" class="filled-in" />
                                <span>Filled in</span>
                            </label>
                        </div>
                    </li>
                </ul>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var elems = document.querySelectorAll(".collapsible");
        var instances = M.Collapsible.init(elems, {});
    });
</script>