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的click事件，我会很高兴，但我不知道该怎么做。

有什么想法吗？

Answer 1

如果您想重新启用该复选框并获得适当的行为，则应在该复选框上为click事件添加处理程序以更改模型：

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

在控制器中添加处理程序：

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

Answer 2

好吧，我终于找到了一个解决方案，尽管它并不完全完美，但是效果很好，我很满意。不允许我通过单击父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中断到子复选框的问题，但是仅通过设置更高的填充，您实际上就可以实现相同的用户体验，这就是我想要。

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

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

2 个答案: