Topic: mdb-checkbox change problem

ASOKUMAR IT free asked 3 years ago

Expected behavior after changing checkbox values programmatically, onchange not firing properly. ie., clicking on the previously checked should check on the first click. Actual behavior clicking on the previously checked not checking on the first click. Resources (screenshots, code snippets etc.)

After calling deleteAllDates() the checkboxes are unchecked as expected, but when I click again the previously selected checkbox nothing happens; I have to click again to check. Other checkboxes that I haven't touched before work as expected.

onChange(event) {
let idstr: string =;
let id = idstr.substr(3);
if (event.element.checked) {
else {
  let ndx = this.chosenTimes.indexOf(this.times[id]);
  this.chosenTimes.splice(ndx, 1);
}   }

deleteAllDates() {
let chkbs = this._document.querySelectorAll('[id^="chk"]');

chkbs.forEach((c: any) => {                
    (c as CheckboxComponent).checked=false;               

this.datePicker.clearDate();  }

<mdb-checkbox *ngFor="let t of times; let i=index;" [default]="false" id="chk{{i}}" (change)="onChange($event)" >

Arkadiusz Idzikowski staff commented 3 years ago

Please try to use [checked] binding or toggle() method instead of changing the component property directly.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 11.0.0
  • Device: pc
  • Browser: firefox, chrome, edge
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No