Uncheck always checkbox

Question

I am using a checkbox and I hope it is never checked.

I used a function for this, but it is not working, if you check the checkbox a few times it is active (checked).

How can I keep it always unchecked?

.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

@ConnorsFan I intend to click on it to extract data from the event, but I intend that it will never be checked :( — mark, Mar 24 '20 at 14:53

ConnorsFan · Accepted Answer · 2020-03-24T15:07:18.710

You can use [ngModel] binding to display the check value and (ngModelChange) event handling to process the change:

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

In the event handler:

Set the new check value
Force change detection by calling ChangeDetectorRef.detectChanges
Set the check value back to false

change(value) {
  this.check = value;
  this.changeDetectorRef.detectChanges();
  this.check = false;
  ...
}

See this stackblitz for a demo.

score 0 · Answer 2 · answered Mar 24 '20 at 14:56

I've tried simple

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

But for me it doesn't worked.

Seems to be a bug or something.

Workaround options are:

<dx-check-box [value]="false" [disable]="true"></dx-check-box> - working, and looking a bit differently, but you can set up some styles in css to make it look as it's not disabled
paint transparent div over the checkbox, it prevents input from being clicked

Uncheck always checkbox

2 Answers2