A click event is being used on a ul element with a checkbox below it. When the checkbox is checked, the list should be enabled and the click event should work. If the checkbox is unchecked, the list should be disabled and the click event should not work.
Below is the list:
<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>
Any ideas on how this can be achieved would be appreciated.