diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 0a5388c89..145d9f273 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -1,5 +1,13 @@ import type { CSSProperties } from 'vue'; -import { watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue'; +import { + computed, + watchEffect, + onMounted, + defineComponent, + inject, + onBeforeUnmount, + ref, +} from 'vue'; import classNames from '../_util/classNames'; import VcCheckbox from '../vc-checkbox/Checkbox'; import { flattenChildren } from '../_util/props-util'; @@ -24,14 +32,16 @@ export default defineComponent({ setup(props, { emit, attrs, slots, expose }) { const formItemContext = useInjectFormItemContext(); const formItemInputContext = FormItemInputContext.useInject(); - const { prefixCls, direction } = useConfigInject('checkbox', props); + const { prefixCls, direction, disabled } = useConfigInject('checkbox', props); // style const [wrapSSR, hashId] = useStyle(prefixCls); const checkboxGroup = inject(CheckboxGroupContextKey, undefined); const uniId = Symbol('checkboxUniId'); - + const mergedDisabled = computed(() => { + return checkboxGroup?.disabled.value || disabled.value; + }); watchEffect(() => { if (!props.skipGroup && checkboxGroup) { checkboxGroup.registerValue(uniId, props.value); @@ -82,7 +92,7 @@ export default defineComponent({ checkboxGroup.toggleOption({ label: children, value: props.value }); }; checkboxProps.name = checkboxGroup.name.value; - checkboxProps.checked = checkboxGroup.mergedValue.value.indexOf(props.value) !== -1; + checkboxProps.checked = checkboxGroup.mergedValue.value.includes(props.value); checkboxProps.disabled = props.disabled || checkboxGroup.disabled.value; checkboxProps.indeterminate = indeterminate; } else { @@ -118,6 +128,7 @@ export default defineComponent({ {...checkboxProps} class={checkboxClass} ref={checkboxRef} + disabled={mergedDisabled.value} /> {children.length ? {children} : null} ,