I am currently facing an issue with disabling a PrimeNG checkbox under certain conditions by setting the disabled property to true. However, whenever I click on the disabled checkbox, it refreshes the page and redirects me to the rootpage /#.
To troubleshoot this problem, I attempted to manually disable the checkbox using the following code snippet:
<p-checkbox [ngModel]="visibleInReport()" (click)="$event.stopPropagation()" [disabled]="true" binary="true" (onChange)="toggleSelection($event)"></p-checkbox>
The function toggleSelection() in my component is as follows:
toggleSelection(event) {
console.log("Updating TherapyMatch Visibility");
this.therapyService.updateReportVisability(this.revisionId, this.therapy.id, event).subscribe((res) => {
console.log(res);
});
}
My question is whether utilizing the disabled property is the correct approach to prevent any action when clicking on this checkbox?