fix(checkbox, radio, toggle): disabled elements are not interactive (#28294)

Issue number: resolves #28293

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Disabled toggles, radios, and checkboxes can still be enabled by
manually dispatching a click event on them.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Toggles, radios, and checkboxes no longer activate if `disabled` is
set to `true`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.4-dev.11696545130.1171e7a9`

core/src/components/toggle/test/toggle.spec.ts

@@ -41,3 +41,24 @@ describe('toggle', () => {
     });
   });
 });
+
+describe('ion-toggle: disabled', () => {
+  it('clicking disabled toggle should not toggle checked state', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle disabled="true">Toggle</ion-toggle>
+      `,
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    expect(toggle.checked).toBe(false);
+
+    toggle.click();
+
+    await page.waitForChanges();
+
+    expect(toggle.checked).toBe(false);
+  });
+});

core/src/components/toggle/toggle.tsx

@@ -259,6 +259,10 @@ export class Toggle implements ComponentInterface {
   }
 
   private onClick = (ev: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+
     ev.preventDefault();
 
     if (this.lastDrag + 300 < Date.now()) {