This tutorial shows you how to dynamically enable and disable widgets when toggling a checkbox and typing in a text field.  It uses conditions, the OnKeyUp event, and "Enable Widget" action.

Conditional Logic Tutorial

Terms & Conditions

Dynamic Enable & Disable

Now you can condition on checkboxes and from events like OnKeyUp. Getting the hang of it?

First, open TermsAndConditions.rp and open the "Terms and Conditions" page.

Let's start by disabling the signature text field and the Continue button.

Right click on the text field and select "Edit Text Field > Set Disabled".  For the button, right click and select "Edit Button > Set Disabled".

Select the checkbox and add a case to the OnClick event.  In the Case Editor, click "Add Condition" to open up the Condition Builder.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureTermsAndConditions.zip)

This zip file contains the RP file needed to complete this tutorial

The condition builder does it's best to guess what you will want as the condition. In this case it initializes the condition to "is checked of AgreeCheckbox equals value true".

We don't need to change anything here, so click OK to close the Condition Builder.

Now that we've defined the condition, we can setup the action to perform when that condition is met.

Click "Enable Widget" and click the SignaturePanel checkbox.

Click OK to close the Case Editor.

With the AgreeCheckbox still selected, double-click OnClick again to add a second case.  This is our "Else if True" case. Click Disable Widget(s) and select the SignatureField checkbox.

Click OK to close the Case Editor.

Next, we'll enable the Continue button when the user types into the text field.

Select the text field and add a case to the OnKeyUp event.  In the Case Editor, click "Add Condition" to open up the Condition Builder.

The condition will automatically be setup to use the text on the text field, but we want to change the droplist in the middle to "does not equal". The condition should read "text on widget Signaturefield does not equal value (blank)".

This means that if there is any text in the text field, the actions on this case should be performed.

Now click "Enable Widget(s)" and check the ContinueButton checkbox. 

The completed interaction translates to "If there is text in the SignatureField, then enable the ContinueButton". You can also add a second case to disable the ContinueButton if the text is blank.

Generate a prototype and test it out.

Step 1: Disable text field and button

Step 2: Add OnClick interaction to checkbox

Step 3: Add condition

Step 4: Enable the SignatureField

Step 5: Add "Else if" case

Step 6: Add OnKeyUp case to text field

Step 7: Build the condition

Step 8: Add action to enable the button

Next: Auto-Tab Fields Tutorial

Back to Conditional Logic