angular 2 中未选中复选框时如何禁用单击事件

Question

我在 ul 上使用点击事件。当复选框被选中时，我在 ul 下方有一个复选框，我的列表应该被启用并且点击事件应该起作用。如果复选框未选中，我的列表应该被禁用，点击事件不应该工作。

下面是我的列表：

<td mat-cell *matCellDef="let element; let i = index">
 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

任何人都可以建议我如何实现这一目标。

Answer 1

根据您的复选框条件将 ngClass 添加到您的 ul 列表中，如下所示。

[ngClass]="{'isDisabled': !i.checked}"

添加以下 class 您的 css 文件。这里 pointer-events: none, 所有指针将被禁用。

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}

最终代码如下：-

 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()" [ngClass]="{'isDisabled': !i.checked}">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

并将此添加到 css 文件：

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}

angular 2 中未选中复选框时如何禁用单击事件

how to disable click event when checkbox is unchecked in angular 2

typescript

angular-ui

angular-template

angular7