[new feature] Checkbox: support config the maximum amount of checked options (#631)

docs/demos/views/checkbox.vue

@@ -30,6 +30,16 @@
         </van-cell-group>
       </van-checkbox-group>
     </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-checkbox-group v-model="result" :max="max">
+        <van-cell-group>
+          <van-cell v-for="(item, index) in list" :key="index">
+            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -39,12 +49,14 @@ export default {
     'zh-CN': {
       checkbox: '复选框',
       title3: 'Checkbox 组',
-      title4: '与 Cell 组件一起使用'
+      title4: '与 Cell 组件一起使用',
+      title5: '设置最大可选数',
     },
     'en-US': {
       checkbox: 'Checkbox',
       title3: 'Checkbox Group',
-      title4: 'Inside a Cell'
+      title4: 'Inside a Cell',
+      title5: 'Configure the maximum amount of checked options'
     }
   },
 
@@ -57,7 +69,8 @@ export default {
         'b',
         'c'
       ],
-      result: ['a', 'b']
+      result: ['a', 'b'],
+      max: 2
     };
   }
 };

docs/markdown/en-US/checkbox.md

@@ -69,6 +69,30 @@ export default {
 </van-checkbox-group>
 ```
 
+#### Configure the maximum amount of checked options
+
+```html
+<van-checkbox-group v-model="result" :max="max">
+  <van-cell-group>
+    <van-cell v-for="(item, index) in list" :key="index">
+      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
+```
+
+```
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b'],
+      max: 2
+    };
+  }
+};
+```
+
 ### Checkbox API
 
 | Attribute | Description | Type | Default | Accepted Values |
@@ -82,6 +106,7 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | Disable all checkboxes | `Boolean` | `false` | - |
+| max | the maximum amount of checked options | `Number` | `0`(Unlimited) | - |
 
 ### Checkbox Event
 

docs/markdown/zh-CN/checkbox.md

@@ -73,6 +73,33 @@ export default {
 </van-checkbox-group>
 ```
 
+#### 设置最大可选数
+
+此时你需要引入`CellGroup`组件，`Cell`组件非必须
+
+```html
+<van-checkbox-group v-model="result" :max="max">
+  <van-cell-group>
+    <van-cell v-for="(item, index) in list" :key="index">
+      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
+```
+
+```
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b'],
+      max: 2
+    };
+  }
+};
+```
+
+
 ### Checkbox API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
@@ -86,6 +113,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
+| max | 设置最大可选数 | `Number` | `0`（无限制） | - |
 
 ### Checkbox Event
 

packages/checkbox-group/index.vue

@@ -12,7 +12,11 @@ export default create({
 
   props: {
     value: {},
-    disabled: Boolean
+    disabled: Boolean,
+    max: {
+      default: 0,
+      type: Number
+    }
   },
 
   watch: {

packages/checkbox/index.vue

@@ -3,7 +3,7 @@
     class="van-checkbox"
     :class="[
       `van-checkbox--${shape}`,
-      { 'van-checkbox--disabled': isDisabled }
+      { 'van-checkbox--disabled': isDisabled || isLimit }
     ]"
   >
     <span class="van-checkbox__input">
@@ -90,7 +90,12 @@ export default create({
     },
 
     isDisabled() {
-      return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled;
+      return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled ||
+          (this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length && !this.isChecked);
+    },
+
+    isLimit() {
+      return this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length;
     }
   },
 

test/unit/components/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-checkbox-group v-model="result">
+  <van-checkbox-group v-model="result" :max="max">
     <van-checkbox v-for="(item, index) in list" :key="index" :name="item" :disabled="index === 2">复选框{{item}}</van-checkbox>
   </van-checkbox-group>
 </template>
@@ -22,7 +22,8 @@ export default {
         'c',
         'd'
       ],
-      result: ['a', 'b']
+      result: ['a', 'b'],
+      max: 0
     };
   }
 };

test/unit/specs/checkbox.spec.js

@@ -67,6 +67,23 @@ describe('CheckboxGroup', () => {
     });
   });
 
+  it('click on unchecked item and checked options num beyond max', (done) => {
+    wrapper = mount(CheckboxTestComponent);
+
+    wrapper.setData({
+      'max': 2
+    });
+
+    const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
+    lastCheckboxLabel.trigger('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.result.indexOf('d')).to.equal(-1);
+      done();
+    });
+  });
+
   it('click on disabled item', (done) => {
     wrapper = mount(CheckboxTestComponent);