Conditionally set a checkbox as disabled based on another checkbox value

[pedlima]

So I have this JSON that is being sent from my C# application to React.

I need to know if checkbox1 is false, then checkbox2 should be disabled/readonly. Only becoming enabled if checkbox1 is true.

I've tried multiple ways and the only way I could achieve something was using resolveProps:

`resolveProps: (props, { meta, input }, { getState, ...formOptions }) => {
const disabled = getState().values?.Recovery;
const value = disabled ? false : input.value;

formOptions.change(input.name, value);
return {
    isDisabled: disabled, isReadOnly: disabled
}

}`

But this had a problem, the formOptions was always setting the value to false.

Then I tried with conditions, like so:

condition: { when: 'checkbox1', is: true, then: { set: { readonly: true value: false } } }

Problem with this approach is that, although checkbox2 input actually dissappear, if I previously clicked and then put checkbox1 as false, checkbox2 keeps the true state and that gets saved into db, not assuming the false as it should.

How can I solve this?

[rvsia]

Hello,

ReadOnly

You have two options

1. Have two fields with the same name in schema - one normal, second is readOnly. Use condition to show/hide them based on the value.

2. Use resolveProps based on different field https://data-driven-forms.org/examples/resolve-props-example#wrapthecomponentinformspy to set disabled/readOnly, please do not do any side effects in resolve props

Remove value from the state

In this case, just remove the value in your submit function.

Alternative

if there is no requirement to make the second checkbox disabled/readOnly, you can use condition together with clearOnUnmnout. Condition will hide the field, clearOnUnmnout will remove the value from the state.

[rvsia]

Example for resolveProps: https://stackblitz.com/edit/yufewh (global subscription is being used)

Example for using conditions and two fields https://stackblitz.com/edit/yufewh-n1dpxo

Example for the alternative: https://stackblitz.com/edit/yufewh-1ws6bc

[pedlima]

Thank you so much for your (very) quick answer. I really appreciate it!

It worked. :)