保持复选框处于选中状态

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

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

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

from

<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"并强制输入状态。

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

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

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

Like

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

And

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

斯塔克闪电战

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

另外我想补充两点

1. 不要像您的示例中那样添加不必要的变量this.disabled。因为 Angular 对每个事件都会运行它的循环。所以可能会影响性能
2. 使用单选而不是复选框，这样会更容易