保持复选框选中角度

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

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>