How to disable a component unless a condition is met?
The customConditional
property can be (ab)used for this. We can follow the example on how to hide a component instead of disabling it and make a few changes:
not hiding the button and changing the customConditional
property.
cb = component.Checkbox("TheCheckbox", form);
cb.label = "I agree";
nr = component.Number("TheNumber", form);
nr.label = "Years of experience";
btn = component.Button("TheButton", form);
btn.label = "Continue";
btn.block = true;
btn.customConditional = "component.disabled = data.TheCheckbox && data.TheNumber > 5";
cb = component.Checkbox("TheCheckbox", form)
cb.label = "I agree"
nr = component.Number("TheNumber", form)
nr.label = "Years of experience"
btn = component.Button("TheButton", form)
btn.label = "Continue"
btn.block =True
btn.customConditional = "component.disabled = data.TheCheckbox && data.TheNumber > 5"
The resulting form in action: