angular - 选中和取消选中复选框取决于某些条件

Question

我在 app.components.html 中有以下复选框

<mat-checkbox (change)="temperature($bd_submain)">Temperature</mat-checkbox>
<mat-checkbox color='primary'>Soil Moisture</mat-checkbox>

每当我检查“温度复选框”时。我必须禁用“土壤水分复选框”，反之亦然

我在 app.components.ts 中使用了以下内容

temperature(bd_submain){
console.log(bd_submain)
if(bd_submain.checked == true){
var input=document.getElementById("group");
input.disabled = true;
} 
} 

标签： angular

Answer 1

你可以这样做：

HTML：

<mat-checkbox [(ngModel)]="first" >Fisrt</mat-checkbox>
<mat-checkbox [(ngModel)]="second" [disabled]="first"> Second</mat-checkbox>

TS：

first: boolean = false;
second: boolean = false;

因此，当您选中第一个复选框时，第二个复选框会被禁用。