Question

我有一个复选框，最初应该是不活动的。并且还有一个按钮应该是不活动的。如果该复选框处于活动状态，则该按钮也将处于活动状态。反之亦然。

ts：

  disabled: boolean = false;

  changeEvent(event) {
    if (event.target.checked) {
      this.disabled = true;
    }
    else {
      this.disabled = false;
    }
  }

html：

<mat-checkbox color="primary" (change)="changeEvent($event)">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="!disabled">Click</button>

Answer 1

您可以使用组件变量来引用复选框本身

<mat-checkbox #disabler color="primary">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="disabler.checked">
  Click
</button>

Answer 2

禁用属性时，必须提供文字值或忽略属性。您可以尝试：

<button mat-button color="primary" [disabled]="disabled ? 'disabled' : null">Click</button>

Answer 3

您的逻辑应该有效（如我在this quick Stackblitz中所做的证明）：

component.ts ：

disabled = false;

change(event) {
  this.disabled = event.target.checked;
}

component.html ：

<input type="checkbox" (change)="change($event)">Disabled
<button [disabled]="!disabled">Click</button>

您是否缺少某些Angular Material导入或包含元素？

Answer 4

为什么不使用[[ngModel）]？

<mat-checkbox[(ngModel)]="disabled">Disabled</mat-checkbox>
<button [disabled]="disabled?true:null">Click</button>

//in your .ts
disabled: boolean = true;

Answer 5

删除条件内的目标。

git push --all

如何使用复选框锁定按钮？

5 个答案: