Question

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

这是我的下面列表：

<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}"

将以下类添加到您的css文件中。在此处指针事件：无，所有指针将被禁用。

.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;
}

在角度2中取消选中复选框时如何禁用点击事件

1 个答案: