保持選中 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>