javascript - Avmarkera alltid kryssrutan

Jag använder en kryssruta och jag hoppas att den aldrig blir markerad.

Jag använde en funktion för detta, men den fungerar inte, om du kryssar i kryssrutan några gånger blir den aktiv (markerad).

Hur kan jag alltid hålla det okryssat?

DEMO

.TS

check: boolean = false;

change(e){
  this.check = false
}

.HTML

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
    <ng-container *ngFor="let product of data; let  j = index;">
        <li class="mdc-image-list__item">
            <div class="mdc-image-list__image-aspect-container">
                        <img [src]="product.image" class="mdc-image-list__image">
            </div>
            <div class="mdc-image-list--with-text-protection">
                <div class="mdc-image-list__supporting mdc-image-list__supporting">
                    <span class="mdc-image-list__label">{{product.name}}</span>
                </div>
                <div class="Info">
                    <dx-check-box (onValueChanged)="change($event);" [(value)]="check"></dx-check-box>
                </div>
            </div>
        </li>
    </ng-container>
</ul>

Problem

Svar #1

Du kan använda [ngModel]-bindning för att visa check-värdet och (ngModelChange)-händelsehantering för att bearbeta ändringen:

<dx-check-box [ngModel]="check" (ngModelChange)="change($event)"></dx-check-box>

I händelsehanteraren:

  1. Ställ in det nya check-värdet
  2. Tvinga ändringsavkänning genom att anropa ChangeDetectorRef.detectChanges
  3. Sätt tillbaka värdet check till false
change(value) {
  this.check = value;
  this.changeDetectorRef.detectChanges();
  this.check = false;
  ...
}

Se denna stackblitz för en demo.

Svar #2

Jag har försökt enkelt

<dx-check-box [value]="false"></dx-check-box>

Men för mig fungerade det inte.

Verkar vara en bugg eller något.

Tillfälliga lösningar är:

  1. <dx-check-box [value]="false" [disable]="true"></dx-check-box> - fungerar, och ser lite annorlunda ut, men du kan ställa in några stilar i css för att få det att se ut som om det inte är inaktiverat

  2. måla transparent div över kryssrutan, det förhindrar att input klickas