feat(CheckboxGroup): toggleAll support skipDisabled option (#7644)

src/checkbox-group/index.js

@@ -27,16 +27,19 @@ export default createComponent({
 
   methods: {
     // @exposed-api
-    toggleAll(checked) {
+    toggleAll(options = {}) {
-      if (checked === false) {
+      if (typeof options === 'boolean') {
-        this.$emit('input', []);
+        options = { checked: options };
-        return;
       }
 
-      let { children } = this;
+      const { checked, skipDisabled } = options;
-      if (!checked) {
+
-        children = children.filter((item) => !item.checked);
+      const children = this.children.filter((item) => {
+        if (item.disabled && skipDisabled) {
+          return item.checked;
         }
+        return checked ?? !item.checked;
+      });
 
       const names = children.map((item) => item.name);
       this.$emit('input', names);

src/checkbox/README.md

@@ -259,7 +259,30 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
-| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
+| toggleAll | Toggle check status of all checkboxes | _options?: boolean \| object_ | - |
+
+### toggleAll Usage
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// Toggle all
+checkboxGroup.toggleAll();
+// Select all
+checkboxGroup.toggleAll(true);
+// Unselect all
+checkboxGroup.toggleAll(false);
+
+// Toggle all, skip disabled
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// Select all, skip disabled
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox Methods
 

src/checkbox/README.zh-CN.md

@@ -283,7 +283,30 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+| toggleAll | 切换所有复选框，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - |
+
+### toggleAll 方法示例
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// 全部反选
+checkboxGroup.toggleAll();
+// 全部选中
+checkboxGroup.toggleAll(true);
+// 全部取消
+checkboxGroup.toggleAll(false);
+
+// 全部反选，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// 全部选中，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox 方法
 

src/checkbox/test/index.spec.js

@@ -160,7 +160,7 @@ test('toggleAll method', async () => {
       <van-checkbox-group v-model="result" ref="group">
         <van-checkbox name="a" />
         <van-checkbox name="b" />
-        <van-checkbox name="c" />
+        <van-checkbox name="c" disabled />
       </van-checkbox-group>
     `,
     data() {
@@ -186,4 +186,12 @@ test('toggleAll method', async () => {
   wrapper.vm.toggleAll(true);
   await later();
   expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
+
+  wrapper.vm.toggleAll({ skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['c']);
+
+  wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
 });

types/checkbox-group.d.ts

@@ -1,5 +1,10 @@
 import { VanComponent } from './component';
 
+export type ToggleAllOptions = {
+  checked?: boolean;
+  skipDisabled?: boolean;
+};
+
 export class CheckboxGroup extends VanComponent {
-  toggleAll(checked?: boolean): void;
+  toggleAll(options?: boolean | ToggleAllOptions): void;
 }