Disabling PrimeNG checkbox

I'm trying to disable a PrimeNG checkbox in certain cases using the disabled property and setting it to true. However, each time the checkbox is disabled and I click it, it refreshes the page and takes me to the rootpage /#.

As a test I have tried to manually disable the checkbox :

 <p-checkbox [ngModel]="visibleInReport()" (click)="$event.stopPropagation()" [disabled]="true" binary="true" (onChange)="toggleSelection($event)"></p-checkbox>

From my component, the toggleSelection() function is the following :

   toggleSelection(event) {
   console.log("Updating TherapyMatch Visibility");

   this.therapyService.updateReportVisability(this.revisionId, this.therapy.id, event).subscribe((res) => {
     console.log(res);
   });

  }

Is the disabled property the correct way to prevent any action from occurring when this checkbox is clicked ?

Is the disabled property the correct way to prevent any action from occurring when this checkbox is clicked ?

Yes it is. And you don't need to manage a click event.

Have a look to this StackBlitz where I just made the disabled property dynamic.