html - 如果复选框未选中，则禁用按钮

Question

我有一个带有复选框和按钮的 Angular 组件，如果未选中该复选框，则应禁用该按钮。
什么是正确的方法？

<div class="form-check my-5">
  <input type="checkbox" class="form-check-input id="agreements">
  <label class="form-check-label" for="agreements">I have signed the agreements</label>
</div>

<button type="button" class="btn btn-outline-danger">Continue</button>

Answer 1

使用带有一个标志的 [disabled] 属性。

component.html

<div class="form-check my-5">
  <input type="checkbox" class="form-check-input" [(ngModel)]="isDisabled" id="remember-me" name="rememberMe">
  <label class="form-check-label"  for="remember-me">I have signed the agreements</label>
</div>

<button type="button" [disabled]="!isDisabled" class="btn btn-outline-danger">Continue</button>

component.ts

isDisabled: boolean = false;

这将解决您的问题..