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 @@
+
+ 复选框
+
+
+
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..9c3a21967f
--- /dev/null
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts
@@ -0,0 +1,22 @@
+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('#disabled .tiny-checkbox')
+
+ await expect(checkbox).toHaveClass(/is-disabled/)
+ await expect(checkbox).toHaveClass(/is-checked/)
+
+ // 在浏览器上下文调用原生 click,但先作类型判断,避免 TS 报错
+ await checkbox.evaluate((node: Element) => {
+ if (node instanceof HTMLElement) {
+ node.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 @@
+
+ 复选框
+
+
+
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': '
通过 disabled 字段设置当前复选框是否为禁用状态。
',
+ 'en-US': 'Set whether the current checkbox is disabled through the disabled field.
'
+ },
+ codeFiles: ['checkbox-disabled.vue']
+ },
{
demoId: 'checkbox-group',
name: {