fix(checkbox): 修复checkbox可以选中禁用的选项(#1549)

src/checkbox/_example/group.vue

@@ -12,7 +12,7 @@
       <t-checkbox :check-all="true" label="全选" />
       <t-checkbox value="选项一">选项一</t-checkbox>
       <t-checkbox label="选项二" value="选项二" />
-      <t-checkbox label="选项三" value="选项三" />
+      <t-checkbox label="选项三" value="选项三" :disabled="true" />
     </t-checkbox-group>
 
     <br />

src/checkbox/group.tsx

@@ -36,19 +36,16 @@ export default defineComponent({
     const optionList = ref<Array<CheckboxOptionObj>>([]);
 
     const intersectionLen = computed<number>(() => {
+      if (!isArray(innerValue.value)) return 0;
       const values = optionList.value.map((item) => item.value);
-      if (isArray(innerValue.value)) {
-        const n = intersection(innerValue.value, values);
-        return n.length;
-      }
-      return 0;
+      const n = intersection(innerValue.value, values);
+      return n.length;
     });
 
     const isCheckAll = computed<boolean>(() => {
-      if (isArray(innerValue.value) && innerValue.value.length !== optionList.value.length - 1) {
-        return false;
-      }
-      return intersectionLen.value === optionList.value.length - 1;
+      const excludeCount = optionList.value.filter((item) => item.disabled || item.checkAll).length;
+      if (isArray(innerValue.value) && innerValue.value.length !== optionList.value.length - excludeCount) return false;
+      return intersectionLen.value === optionList.value.length - excludeCount;
     });
 
     const indeterminate = computed<boolean>(
@@ -76,6 +73,7 @@ export default defineComponent({
       for (let i = 0, len = optionList.value.length; i < len; i++) {
         const item = optionList.value[i];
         if (item.checkAll) continue;
+        if (item.disabled) continue;
         val.add(item.value);
         if (maxExceeded.value) break;
       }

test/snap/__snapshots__/csr.test.js.snap

@@ -26051,10 +26051,11 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
       </span>
     </label>
     <label
-      class="t-checkbox"
+      class="t-checkbox t-is-disabled"
     >
       <input
         class="t-checkbox__former"
+        disabled=""
         name=""
         type="checkbox"
         value="选项三"

test/snap/__snapshots__/ssr.test.js.snap

@@ -209,7 +209,7 @@ exports[`ssr snapshot test > ssr test ./src/checkbox/_example/base.vue 1`] = `"<
 
 exports[`ssr snapshot test > ssr test ./src/checkbox/_example/controlled.vue 1`] = `"<div data-v-032bf202><!-- 单个 Checkbox 受控模式 --><label class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->语法糖（v-model）<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控属性<!--]--></span></label><label class=\\"t-checkbox\\" data-v-032bf202><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->非受控属性<!--]--></span></label><br data-v-032bf202><br data-v-032bf202><br data-v-032bf202><!-- 复选框框组受控模式 --><div class=\\"t-checkbox-group\\" data-v-032bf202><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"1\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"2\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"3\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->受控模式选项三<!--]--></span></label><!--]--></div></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/checkbox/_example/group.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div><div><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"true\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label></div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项一</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label><!--]--></div><br><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式四：组件内置全选功能，非受控用法</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div></div>"`;
+exports[`ssr snapshot test > ssr test ./src/checkbox/_example/group.vue 1`] = `"<div class=\\"tdesign-demo-block-column\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div><div><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"true\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label></div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项一</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项二<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label class=\\"t-checkbox t-is-disabled\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" disabled indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label><!--]--></div><br><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div><br><div>方式四：组件内置全选功能，非受控用法</div><div class=\\"t-checkbox-group\\"><!--[--><label class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->全选<!--]--></span></label><label class=\\"t-checkbox t-is-checked\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项一\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项一<!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项二\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--><div>选项二</div><!--]--></span></label><label class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" name value=\\"选项三\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->选项三<!--]--></span></label><!--]--></div></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/checkbox/_example/link.vue 1`] = `
 "<div data-v-277157aa><div class=\\"demo-checkbox-row-desc\\" data-v-277157aa>选中值: [