首页 文章

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

提问于
浏览 次
0

我有一个动态创建的表单，它有一个简单的列表（在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的点击事件，我会很高兴，但我不知道该怎么做 .

有任何想法吗？

javascript html angular

2 回答

  • 1

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

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

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

    flip($event, option) {
    option.active=$event.target.checked;
}
    回复于
  • 0

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

    我希望这对偶然遇到这个恼人问题的其他人有用！

    回复于

相关问题