From 13ce11f6087da3797254bbe4256e53a4f408eb19 Mon Sep 17 00:00:00 2001
From: inottn <inottn@outlook.com>
Date: Fri, 5 May 2023 10:04:36 +0800
Subject: [PATCH] fix(Checkbox): disabled unchecked options when the limit is
 exceeded (#11814)

* fix(Checkbox): disabled unchecked options when the limit is exceeded

* fix: ts def
---
 .../src/checkbox-group/test/index.spec.tsx    | 35 +++++++++++++++++++
 packages/vant/src/checkbox/Checker.tsx        | 23 ++++++++++--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/checkbox-group/test/index.spec.tsx b/packages/vant/src/checkbox-group/test/index.spec.tsx
index 76cf8b1a8..0e55e76d9 100644
--- a/packages/vant/src/checkbox-group/test/index.spec.tsx
+++ b/packages/vant/src/checkbox-group/test/index.spec.tsx
@@ -3,6 +3,8 @@ import { mount } from '../../../test';
 import { Checkbox } from '../../checkbox';
 import { CheckboxGroup, CheckboxGroupToggleAllOptions } from '..';
 
+const disabledClass = 'van-checkbox--disabled';
+
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {
   const wrapper = mount({
     setup() {
@@ -49,6 +51,39 @@ test('should change icon size when using icon-size prop', () => {
   expect(icons[1].style.fontSize).toEqual('5rem');
 });
 
+test('should limit the number of checked items when using max prop', async () => {
+  const wrapper = mount({
+    setup() {
+      const groupValue = ref(['a']);
+
+      return {
+        groupValue,
+      };
+    },
+    render() {
+      return (
+        <CheckboxGroup v-model={this.groupValue} max={2}>
+          <Checkbox name="a" />
+          <Checkbox name="b" />
+          <Checkbox name="c" />
+          <Checkbox name="d" />
+        </CheckboxGroup>
+      );
+    },
+  });
+
+  const items = wrapper.findAll('.van-checkbox');
+  await items[1].trigger('click');
+  expect(wrapper.vm.groupValue).toEqual(['a', 'b']);
+  expect(items[2].classes()).toContain(disabledClass);
+
+  await items[2].trigger('click');
+  expect(wrapper.vm.groupValue).toEqual(['a', 'b']);
+
+  await items[1].trigger('click');
+  expect(items[2].classes()).not.toContain(disabledClass);
+});
+
 test('should change checked color when using checked-color prop', () => {
   const wrapper = mount({
     render() {
diff --git a/packages/vant/src/checkbox/Checker.tsx b/packages/vant/src/checkbox/Checker.tsx
index d23c146c2..9d96f68f2 100644
--- a/packages/vant/src/checkbox/Checker.tsx
+++ b/packages/vant/src/checkbox/Checker.tsx
@@ -20,6 +20,8 @@ export type CheckerParent = {
     iconSize?: Numeric;
     direction?: CheckerDirection;
     checkedColor?: string;
+    modelValue?: unknown | unknown[];
+    max?: Numeric;
   };
 };
 
@@ -54,9 +56,24 @@ export default defineComponent({
       }
     };
 
-    const disabled = computed(
-      () => getParentProp('disabled') || props.disabled
-    );
+    const disabled = computed(() => {
+      if (props.parent && props.bindGroup) {
+        const disabled = getParentProp('disabled') || props.disabled;
+
+        if (props.role === 'checkbox') {
+          const checkedCount = (getParentProp('modelValue') as unknown[])
+            .length;
+          const max = getParentProp('max');
+          const overlimit = max && checkedCount >= +max;
+
+          return disabled || (overlimit && !props.checked);
+        }
+
+        return disabled;
+      }
+
+      return props.disabled;
+    });
 
     const direction = computed(() => getParentProp('direction'));