如何通过Checkbox实现按钮与复选框的激活状态联动？

Hey，这是实现你需求的完整代码方案，完全符合「复选框和按钮初始都未激活，复选框状态变化时按钮同步联动」的要求：

TypeScript 逻辑部分 #

// 初始化状态：未激活
disabled: boolean = false;

// 复选框状态变化时触发的方法
changeEvent(event) {
  // 根据复选框的勾选状态直接更新控制变量，省去冗余判断
  this.disabled = event.target.checked;
}

HTML 模板部分 #

<!-- 复选框，绑定change事件监听状态变化 -->
<mat-checkbox color="primary" (change)="changeEvent($event)"> Disable Button </mat-checkbox>

<!-- 按钮，通过属性绑定实现状态联动 -->
<button mat-button color="primary" [disabled]="!disabled">Click</button>

逻辑说明： #

• 用disabled布尔变量统一管理状态，初始值false对应「未激活」状态
• 复选框的(change)事件会在勾选/取消时触发changeEvent，直接将复选框的checked值同步给disabled变量
• 按钮通过[disabled]="!disabled"实现联动：当复选框勾选（disabled=true），按钮的禁用属性为false，按钮激活；当复选框取消（disabled=false），按钮禁用属性为true，回到未激活状态

内容的提问来源于stack exchange，提问作者rari