How do I Enable & Disable controls based on other controls

 

Introduction
In Oracle APEX, enabling or disabling form controls based on the values or states of other controls is a key technique to create interactive and user-friendly applications. This dynamic behavior helps guide users through the form, preventing invalid input and simplifying the interface by making certain fields editable only when relevant. Understanding how to implement this functionality improves data integrity and enhances the overall user experience.

In Oracle APEX, enabling and disabling controls based on the values or states of other controls is commonly done using Dynamic Actions. This approach allows you to create interactive forms where certain fields become editable or read-only depending on user input elsewhere on the page. Implementing this enhances usability, prevents invalid data entry, and guides users through complex forms.

Here’s a detailed step-by-step explanation on how to enable or disable controls based on other controls in Oracle APEX:

Step 1: Identify the Controls

• Determine which control (page item) will act as the trigger (the source control), and which control(s) will be enabled or disabled (target control(s)) based on the trigger’s value or state.

For example, you may want to disable an input field unless a checkbox is checked or a select list has a specific value.

Step 2: Create a Dynamic Action

• In the Page Designer, select the trigger control.

• Go to the Dynamic Actions section and create a new Dynamic Action.

• Set the Event to the appropriate event type for the trigger control, commonly:

  • Change for select lists, checkboxes, radios, or text inputs.

  • Click for buttons or checkboxes.

Step 3: Define the True and False Actions

• Add a True Action that Enables or Disables the target control(s).

• Add a False Action that does the opposite, to cover when the condition is not met.

For example, if the trigger control is a checkbox (P1_CHECKBOX):

• True Action: Enable P1_TEXTFIELD

• False Action: Disable P1_TEXTFIELD

Step 4: Set the Condition

• Add a Client-side Condition or Server-side Condition to the Dynamic Action to specify when the true or false actions should fire.

• For simple cases, use a JavaScript Expression in the Client-side Condition.

Example JavaScript Expression for checkbox checked:

return $v('P1_CHECKBOX') === 'Y';

This means the True Action runs when P1_CHECKBOX is checked (Y), and False Action otherwise.

For select lists, you can check selected values:

return $v('P1_SELECT_LIST') === 'YES';

Step 5: Configure Multiple Target Controls (Optional)

• If you want to enable or disable multiple controls at once, list all target items in the Selection Type as jQuery Selector or Items, specifying all controls to affect.

Step 6: Test Your Dynamic Action

• Run the page.

• Change the value or state of the trigger control and observe the target control(s) enabling or disabling accordingly.

• Make sure the form behavior matches your business rules.

Additional Tips

• Use the Enable and Disable actions rather than hiding controls if you want users to see the controls but not interact with them.

• For more complex logic, you can use JavaScript code in the Dynamic Action’s true/false actions to customize behavior further.

• Remember that disabled form elements do not submit their values; if needed, consider using readonly or other UI cues.

Enabling and disabling controls dynamically in Oracle APEX based on other controls’ values is a powerful technique to build interactive and user-friendly forms. By using Dynamic Actions with well-defined conditions, you can guide user input, reduce errors, and simplify complex interfaces. Mastering this approach improves the quality and usability of your APEX applications.

 

Enabling & Disabling Controls Based on Other Controls in Oracle APEX

In Oracle APEX, you can dynamically enable or disable form elements such as text boxes based on user interactions with buttons or dropdown lists. This improves user experience by preventing unnecessary input and ensuring only relevant fields are editable.

This tutorial demonstrates how to create a page with three regions: Buttons, Dropdown List, and Textboxes. The goal is to enable or disable textboxes dynamically based on button clicks or dropdown selections.

There are several ways to approach this challenge. Her is one way:

Step 1: Creating the Page with Three Regions

1. Buttons Region

Create a new Region and add the following five buttons:

• Disable All

• Paul

• Gregg

• Joe

• Chad

Each button will control the corresponding text box in the Text Box Region.

2. Dropdown Region

Add a Select List item (P1_SELECT_NAME) with a LOV (List of Values) containing the following values:

Display Value	Return Value
Paul	PAUL
Gregg	GREGG
Joe	JOE
Chad	CHAD

This dropdown will enable the corresponding text box when a selection is made.

3. Text Box Region

Create four text box items:

• P1_PAUL_TEXT

• P1_GREGG_TEXT

• P1_JOE_TEXT

• P1_CHAD_TEXT

By default, disable all four textboxes so they are only enabled through user interaction.

Step 2: Using Dynamic Actions to Enable/Disable Controls

1. Disabling All Textboxes When Clicking "Disable All"

• Create a Dynamic Action

• Event: Click

• Selection Type: Button

• Button: P1_DISABLE_ALL

• True Action: Disable 

• Affected Elements: P1_PAUL_TEXT, P1_GREGG_TEXT, P1_JOE_TEXT, P1_CHAD_TEXT

2. Enabling a Specific Textbox When Clicking a Button

For each button (Paul, Gregg, Joe, Chad):

• Create a Dynamic Action

• Event: Click

• Selection Type: Button

• Button: Select the corresponding button (P1_PAUL, P1_GREGG, etc.)

• True Action: Enable 

• Affected Element: The matching text box (P1_PAUL_TEXT, P1_GREGG_TEXT, etc.)

3. Enabling a Textbox Based on Dropdown Selection

• Create a Dynamic Action

• Event: Change

• Selection Type: Item

• Item: P1_SELECT_NAME

• True Action: Enable

• JavaScript Expression:

switch ($v('P1_SELECT_NAME')) {

    case 'PAUL': return $('#P1_PAUL_TEXT');

    case 'GREGG': return $('#P1_GREGG_TEXT');

    case 'JOE': return $('#P1_JOE_TEXT');

    case 'CHAD': return $('#P1_CHAD_TEXT');

}

• False Action: Disable All Other Textboxes

• Affected Elements: P1_PAUL_TEXT, P1_GREGG_TEXT, P1_JOE_TEXT, P1_CHAD_TEXT

Step 3: Using JavaScript to Control Enable/Disable Actions

If you prefer a JavaScript-only solution, add this code in the Execute When Page Loads section:

function enableTextbox(name) {

    $('#P1_PAUL_TEXT, #P1_GREGG_TEXT, #P1_JOE_TEXT, #P1_CHAD_TEXT').prop('disabled', true);

    $('#P1_' + name + '_TEXT').prop('disabled', false);

}

$('#P1_DISABLE_ALL').click(function() {

    $('#P1_PAUL_TEXT, #P1_GREGG_TEXT, #P1_JOE_TEXT, #P1_CHAD_TEXT').prop('disabled', true);

});

$('#P1_PAUL').click(function() { enableTextbox('PAUL'); });

$('#P1_GREGG').click(function() { enableTextbox('GREGG'); });

$('#P1_JOE').click(function() { enableTextbox('JOE'); });

$('#P1_CHAD').click(function() { enableTextbox('CHAD'); });

$('#P1_SELECT_NAME').change(function() {

    enableTextbox($(this).val());

});

This JavaScript function ensures that selecting a dropdown value or clicking a button will only enable the corresponding text box while disabling the others.

Best Practices

• Use Dynamic Actions for low-code, APEX-native solutions.

• Use JavaScript for more control and better performance.

• Ensure default states for the textboxes by disabling them when the page loads.

• Optimize UI by using styling to indicate when a field is enabled or disabled.

By following this guide, you can dynamically enable and disable form fields based on button clicks or dropdown selections in Oracle APEX. This enhances user experience by ensuring only relevant fields are editable at any given time.

EXAMPLE:

Here is a second way of fixing this challenge:

Intro: We’re working with a page that

• Has 3 regions

• Buttons

• Dropdown

• Textboxes

• Button regions

• Has 5 buttons

• Disable all

• Paul

• Gregg

• Joe

• Chad

• The disable all button will disable all Text Boxes in the third region

• All other buttons will ENABLE the text box associated with the same button name

• Dropdown region

• Has a Select List 

• The list is attached to an LOV with all four names (Paul, Gregg, Joe, Chad)

• When a name is selected, the textbox matching the name will be ENABLED

• Text Box region

• Has 4 textboxes

• Each text box is associated with a developer name

Step 1 – Add the 3 regions and name them accordingly

Step 2 – Add 5 buttons in the Button region and name them

• Disable all

• Paul

• Gregg

• Joe

• Chad

Step 3 – Create an LOV with the 4 names in the Shared Component section of the App

Step 4- Place a Select List in the region and connect it to the lov just created

Step 5- Create the 4 textboxes and name them after the developers

Step 6-  In the Disable All button, 

• create a Dynamic Action

• Enter the following values

• In the True action make the following choices

Now every time that the button is clicked ALL the textboxes will become DISABLED

Step 7 – Do the following for ALL the rest of the buttons, just change the name to reflect the developer.

• For the rest of the buttons you will create a Dynamic Action with TWO TRUE action branches

• One true branch will Enable the textbox for the selected name

• The second true branch will disable all other textboxes

• In the enable true branch do the following. In this case P14_PAUL happens to the item name for the “Paul” textbox (P14 is the page number)

• In the second TRUE branch we are going to disable all text boxes EXCEPT P14_PAUL

• Enter the following

Now repeat for all of the other buttons, making the reasonable changes based on the developer name. Every time that you press a button of one of the developers, the textbox that matches the name will become enabled.

Step 8 -  Add a Dynamic Action for the Drop Down list as follows

• Note that her we will have one disable TRUE action that will disable all text boxes and four other actions that will enable based on the selected name from the list.

• Create the Disable All list as follows:

• Create 4 more True actions that ENABLE the textbox based on the selected name.

• In this last Client-side Condition

• We want the selected item (the dropdown selection: P14_SELECTNAME) to match on the desired value (Paul). 

• If this matches, then the Affected Elements in the above section (TextBox: P14_Paul) will be ENABLED as per the selected Action in Identification.

In other words, if the name selected from the dropdown box matches the string you have in the “Value” area then the textbox for Paul will be enabled.

Conclusion
Enabling and disabling controls dynamically in Oracle APEX allows you to create smarter, more responsive forms that adapt to user input in real time. By leveraging dynamic actions and conditionally controlling item properties, developers can build applications that are easier to use and less prone to user errors. Mastering these techniques contributes to building polished and professional APEX applications.