禁用时的Angular 6复选框单击事件答案

【问题标题】：Angular 6 checkbox click event when disabled禁用时的Angular 6复选框单击事件
【发布时间】：2019-04-02 09:13:57
【问题描述】：

我想调用一个方法，当我单击禁用的复选框时显示警告烤面包机。

这是我的代码：

<label>
  <input type="checkbox" checked="checked"
    [(ngModel)]="myCheckbox" 
    [disabled]="!hasCar"
    (change)="noCarToastr()"/>
</label>

TypeScript 代码：

noCarToastr(){
  let me  = this;
  if(!hasCar){
    me.toastr.warning("No Car Available");
  }
}

【问题讨论】：

请提供minimal reproducible example 重现该问题
stackoverflow.com/questions/3100319/event-on-a-disabled-input

标签： angular onclick

【解决方案1】：

您不能在禁用的元素上触发 javascript 事件。在label 元素上添加点击监听器。

<label (click)="noCarToastr()">
    <input type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        [disabled]="!hasCar"
        (change)="noCarToastr(); $event.stopPropagation()"/>
        Car
</label>

【讨论】：

【解决方案2】：

Disabled 元素不会触发鼠标事件，因此不是禁用而是阻止基于hasCar 属性值的单击操作，这将阻止选中复选框。为防止该操作使用Event 引用和Event#preventDefault 方法。

模板：

<label for="abc">test
    <input id="abc" type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        (click)="noCarToastr($event, hasCar)"
        />
</label>

组件：

noCarToastr(event: Event) {
  let me = this;
  if (!this.hasCar) {
    event.preventDefault()
    me.toastr.warning("No Car Available");
  }
}

DEMO

【讨论】：

【解决方案3】：

而不是使用@Output(change) 使用@Output(click)，因为更改只会在输入值更改时触发。

<label>
    <input type="checkbox" checked="checked"
        [(ngModel)]="myCheckbox" 
        [disabled]="!hasCar"
        (click)="noCarToastr()"/>
</label>

我建议使用有角材质，因为它提供了其他更直观的选项。

希望这会有所帮助，

【讨论】：