Category: Question and Answers
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Total Newbie - Help how to disable a input field based on a checkbox being checked

Issue

I was unsure how to disable an input field based on a checkbox in Appsmith. I asked for some guidance and was provided with a solution in which I could use the checkbox's isChecked property in the input field's Disabled property. I learned about using JavaScript in mustache syntax and how to invert booleans. With this knowledge, I was able to successfully disable the input field based on the checkbox's status. I am grateful for the help and excited to continue learning in Appsmith.

Resolution

To disable an input field based on the status of a checkbox in Appsmith, you can use the Disabled property of the input field. In the property pane, click the JS icon next to the Disabled property and enter the following snippet: {{Checkbox1.isChecked}}. This will enable/disable the input field based on whether the checkbox is checked or not.

If you want to invert the status of the checkbox (e.g. disable the input field when the checkbox is unchecked), you can use the following code: {{!Checkbox1.isChecked}}. This will reverse the boolean value of the checkbox and enable/disable the input field accordingly.

Overall, it's a simple solution that utilizes Appsmith's mustache syntax for JavaScript expressions. With this method, you can easily create dynamic forms and user interfaces that respond to user input in real-time.