禁用单击复选框；让父 div 处理

Question

我有一个动态创建的表单，它有一个简单的列表（在 ngFor 中创建），它有：

• 处理点击的父 div：它选择或取消选择当前项。
• 该 div 的子复选框，应该显示给定项目的选中/未选中状态。

如果单击 div，一切都会按预期进行，但如果单击复选框，则不会发生任何事情。就像复选框中的点击与 div 的点击相撞，根本没有改变值。

到目前为止，我发现的“最干净”的解决方案根本不是一个干净的解决方案，因为我仍然无法单击复选框，但至少它不会给我这种奇怪的功能。看看吧：

  <div class="popup-elem" *ngFor="let option of selectedCategory?.options" (click)=" option.active = !option.active"
    [ngStyle]="option.active == true 
              ? {'background-color':'aliceblue'} 
              : {'background-color':'white'}">
    <input type="checkbox" [checked]="option.active" style="z-index:550" [disabled]="true">
    {{ option.name }}
  </div>

我用 NgModel 等尝试了其他东西，但到目前为止，这是我所拥有的最好的。如果至少可以在单击复选框时触发 div 的单击事件，我会很高兴，但我不知道该怎么做。

有什么想法吗？

Answer 1

好的，我终于找到了一个解决方案，虽然并不完美，但效果很好，我很满意。它不允许我通过单击父 div 进行选择，但最终结果几乎相同。

  <div class="popup-elem" *ngFor="let option of selectedCategory?.options"
    [ngStyle]="option.active == true 
              ? {'background-color':'aliceblue'} 
              : {'background-color':'white'}">

    <label class="container"> {{ option.name }}
      <input type="checkbox" (change)="option.active = !option.active" [checked]="option.active">
      <span class="checkmark"></span>
    </label>

这样，当我单击该容器的复选框、文本或填充时，该项目会被正确选择。这并没有真正解决事件委托从父 div 到子复选框被破坏的问题，但是通过设置更高的填充，您实际上可以实现相同的用户体验，这就是我想要。

我希望这对偶然发现这个烦人问题的其他人有用！

Answer 2

如果您想重新启用复选框并获得正确的行为，您应该为复选框上的点击事件添加一个处理程序以更改模型：

<input type="checkbox" [checked]="option.active" style="z-index:550" (click)="flip($event, option)" />

在你的控制器中添加一个处理程序：

flip($event, option) {
    option.active=$event.target.checked;
}