Bootstrap 5折叠面板中复选框异常行为问题求助

你遇到的问题核心是点击事件冒泡：当点击折叠面板内的复选框时，事件会向上传递到Bootstrap折叠面板的容器，触发折叠的展开/收起逻辑，干扰了Angular复选框的ng-click和ng-model状态，导致勾选无反应、取消勾选反而添加项的异常。

解决方案：阻止事件冒泡 #

在复选框的ng-click中添加$event.stopPropagation()，让复选框的点击事件只在自身层级处理，不会向上触发折叠面板的逻辑。

修改后的复选框代码：

<input class="form-check-input" type="checkbox" id={{x.id}} ng-click="clickPeople(x.id, x.names); $event.stopPropagation()" ng-checked="checkall" ng-model="x.Selected">

完整的折叠面板内代码示例 #

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Select Tags to Search For
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <form class="list">
          <div class="form-check" ng-repeat="x in tags">
            <a id="{{x.initial}}"></a>
            <input class="form-check-input" type="checkbox" id={{x.id}} ng-click="clickPeople(x.id, x.names); $event.stopPropagation()" ng-checked="checkall" ng-model="x.Selected">
            <label class="form-check-label" for={{x.id}}>{{x.names}} ({{x.tag_link_count}})</label>
          </div>
        </form>                       
      </div>
    </div>
  </div>
</div>

额外提示 #

如果后续仍有状态异常，检查ng-checked和ng-model的配合：ng-checked是单向绑定，ng-model是双向绑定，两者同时使用可能会出现状态冲突，确保你的checkall全选逻辑是正确同步的。

内容的提问来源于stack exchange，提问作者dbq-andersons