保持选中 angular 中的复选框

Question

Using angular 9 and some custom input I made the following =>

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

I would like to prevent user from disabling a radio button that is currently checked, so I changed the following in 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>

I remove the binding of ngModel to do [ngModel]="checked" and force the state on the input.

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

The problem I face i, although the check stay true, the css do not, and I do not understand why it's not forced to check.

Answer 1

Check and uncheck are browser events, perhaps you should use event.preventDefault() to stop default behavior of browser

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()
  }
}

Stackblitz

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

Also I would like to add two more points

1. Don't add unnecessary variable like in your example this.disabled . Because Angular runs its cycle on every event. So it might affect performance
2. Use radio instead of checkbox, that would make it easier

Answer 2

Try like this

<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>