保持选中 angular 中的复选框

Question

使用 angular 9 和一些自定义输入，我做了以下 =>

https://stackblitz.com/edit/angular-ivy-rgsatp

我想阻止用户禁用当前选中的单选按钮，所以我在radio-button.component中更改了以下内容

从

<label [class]="'radio-container ' + cssClass || ''">
  <div class="radio">
    {{ checked }}
    <input type="checkbox" [checked]="checked" [(ngModel)]="checked" (click)="click()" />
    <span class="checkmark"></span>
  </div>

  <div style="margin-left: 20px;">
    <ng-content></ng-content>
  </div>
</label>

我删除了 ngModel 的绑定以执行[ngModel]="checked"并强制输入 state。

https://stackblitz.com/edit/angular-ivy-x2sszw

我面临的问题是，虽然检查保持正确，但 css 没有，我不明白为什么不强制检查。

Answer 1

选中和取消选中是浏览器事件，也许你应该使用event.preventDefault()来停止浏览器的默认行为

喜欢

<input type="checkbox" [checked]="checked" [ngModel]="checked" (click)="click($event)" />

和

click(event): void {
  if (this.checked) {
    event.preventDefault();
  }
  if (!this.disabled) {
    this.checked = true
    this.emitChange()
  }
}

堆栈闪电战

https://stackblitz.com/edit/angular-ivy-pomkvy

另外我想补充两点

1. 不要添加不必要的变量，例如您的示例this.disabled 。 因为 Angular 在每个事件上都运行它的周期。 所以可能会影响性能
2. 使用收音机而不是复选框，这会更容易

Answer 2

像这样试试

<label [class]="'radio-container ' + cssClass || ''">
  <div class="radio">
    {{ checked }}
    <input type="checkbox" [checked]="checked" [ngModel]="checked" (click)="click()" [attr.disabled]="checked ? true : null" />
    <span class="checkmark"></span>
  </div>

  <div style="margin-left: 20px;">
    <ng-content></ng-content>
  </div>
</label>