Checkbox: Using the max attribute can limit the number of items that can be checked (ElemeFE#14742) (ElemeFE#15585)

Author: masongzhi

packages/checkbox/src/checkbox-button.vue

@@ -35,7 +35,7 @@
       @focus="focus = true"
       @blur="focus = false">
 
-    <span class="el-checkbox-button__inner" 
+    <span class="el-checkbox-button__inner"
       v-if="$slots.default || label"
       :style="isChecked ? activeStyle : null">
       <slot>{{label}}</slot>
@@ -150,9 +150,17 @@
         return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
 
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
       isDisabled() {
         return this._checkboxGroup
-          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
           : this.disabled || (this.elForm || {}).disabled;
       }
     },

packages/checkbox/src/checkbox.vue

@@ -136,9 +136,17 @@
         return this._checkboxGroup ? this._checkboxGroup.value : this.value;
       },
 
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
       isDisabled() {
         return this.isGroup
-          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
           : this.disabled || (this.elForm || {}).disabled;
       },
 

test/unit/specs/checkbox.spec.js

@@ -147,6 +147,7 @@ describe('Checkbox', () => {
       }
     }, true);
     expect(vm.checkList.length === 1).to.be.true;
+    expect(vm.$refs.a.isDisabled).to.be.true;
     vm.$refs.a.$el.click();
     vm.$nextTick(() => {
       expect(vm.checkList.indexOf('a') !== -1).to.be.true;
@@ -158,6 +159,8 @@ describe('Checkbox', () => {
         vm.$nextTick(() => {
           expect(vm.checkList.indexOf('c') !== -1).to.be.false;
           expect(vm.checkList.indexOf('d') !== -1).to.be.false;
+          expect(vm.$refs.c.isDisabled).to.be.true;
+          expect(vm.$refs.d.isDisabled).to.be.true;
           done();
         });
       });