From 0a1cb99b13e1eaf70b7f2bebd13216248dbcf1cd Mon Sep 17 00:00:00 2001
From: unknown <1987250181@qq.com>
Date: Fri, 21 Nov 2025 23:49:42 +0800
Subject: [PATCH 1/3] fix(vue-renderless/checkbox): [checkbox] fix disabled
 state style issue

---
 .../checkbox-disabled-composition-api.vue      | 10 ++++++++++
 .../pc/app/checkbox/checkbox-disabled.spec.ts  | 12 ++++++++++++
 .../pc/app/checkbox/checkbox-disabled.vue      | 18 ++++++++++++++++++
 .../demos/pc/app/checkbox/webdoc/checkbox.js   | 13 +++++++++++++
 4 files changed, 53 insertions(+)
 create mode 100644 examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
 create mode 100644 examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue

diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue
new file mode 100644
index 0000000000..990e437412
--- /dev/null
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue
@@ -0,0 +1,10 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyCheckbox } from '@opentiny/vue'
+
+const checked = ref(true)
+</script>
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
new file mode 100644
index 0000000000..c5314d782a
--- /dev/null
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用复选框', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('checkbox#disabled')
+  const checkbox = await page.locator('.tiny-checkbox').first()
+  await expect(checkbox).toHaveClass(/is-disabled/)
+  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('border-color', 'rgb(223, 223, 223)')
+  await checkbox.click()
+  await expect(checkbox).toHaveClass(/is-checked/)
+})
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue
new file mode 100644
index 0000000000..774fc5cab8
--- /dev/null
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue
@@ -0,0 +1,18 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script>
+import { TinyCheckbox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox
+  },
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
index 429a4b08fe..40cccd7a9f 100644
--- a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
+++ b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
@@ -16,6 +16,19 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    // 禁用复选框
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 字段设置当前复选框是否为禁用状态。</p>',
+        'en-US': '<p>Set whether the current checkbox is disabled through the <code>disabled</code> field.</p>'
+      },
+      codeFiles: ['checkbox-disabled.vue']
+    },
     {
       demoId: 'checkbox-group',
       name: {

From f7aec6aa6cc8002680caa88a64fb0ce7a813a1b8 Mon Sep 17 00:00:00 2001
From: unknown <1987250181@qq.com>
Date: Wed, 26 Nov 2025 21:53:27 +0800
Subject: [PATCH 2/3] fix(checkbox): [checkbox] fix disabled state style and
 improve disabled checked behavior test

---
 .../demos/pc/app/checkbox/checkbox-disabled.spec.ts    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
index c5314d782a..a9a4c49099 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
@@ -3,10 +3,14 @@ import { test, expect } from '@playwright/test'
 test('禁用复选框', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('checkbox#disabled')
-  const checkbox = await page.locator('.tiny-checkbox').first()
+  const checkbox = page.locator('.tiny-checkbox').first()
+  const inner = checkbox.locator('.tiny-checkbox__inner')
+
   await expect(checkbox).toHaveClass(/is-disabled/)
-  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('background-color', 'rgb(245, 245, 245)')
-  await expect(checkbox.locator('.tiny-checkbox__inner')).toHaveCSS('border-color', 'rgb(223, 223, 223)')
+  await expect(checkbox).toHaveClass(/is-checked/)
+
+  await expect(inner).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(inner).toHaveCSS('border-color', 'rgb(223, 223, 223)')
   await checkbox.click()
   await expect(checkbox).toHaveClass(/is-checked/)
 })

From 092134e3271bb05c4f2fc194e842cf95bbce8f3c Mon Sep 17 00:00:00 2001
From: unknown <1987250181@qq.com>
Date: Fri, 28 Nov 2025 23:21:22 +0800
Subject: [PATCH 3/3] test(checkbox): fix disabled checkbox e2e test by using
 native click via evaluate

---
 .../pc/app/checkbox/checkbox-disabled.spec.ts    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
index a9a4c49099..9c3a21967f 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
@@ -2,15 +2,21 @@ import { test, expect } from '@playwright/test'
 
 test('禁用复选框', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
   await page.goto('checkbox#disabled')
-  const checkbox = page.locator('.tiny-checkbox').first()
-  const inner = checkbox.locator('.tiny-checkbox__inner')
+
+  const checkbox = page.locator('#disabled .tiny-checkbox')
 
   await expect(checkbox).toHaveClass(/is-disabled/)
   await expect(checkbox).toHaveClass(/is-checked/)
 
-  await expect(inner).toHaveCSS('background-color', 'rgb(245, 245, 245)')
-  await expect(inner).toHaveCSS('border-color', 'rgb(223, 223, 223)')
-  await checkbox.click()
+  // 在浏览器上下文调用原生 click，但先作类型判断，避免 TS 报错
+  await checkbox.evaluate((node: Element) => {
+    if (node instanceof HTMLElement) {
+      node.click()
+    }
+  })
+
+  // 状态应保持不变
   await expect(checkbox).toHaveClass(/is-checked/)
 })