Oracle APEX Tabular form select list disable

Question

Using Oracle Apex 4.2

I have a tabular form where you can create a new row and can update existing data. I am having a problem with trying to disable or make items read only in a select list on the tabular form.

For example, the select list has in it; orange, green, blue, red

I want to be able to disable or read only the items blue and orange in the select list based on a value from another column.

Any help would be appreciated.

Answer 1

This is a quick test in Apex 5, but i think you can use similar approach in 4.2
1. Create Dynamic Action On Page Load
- set Action to Execute JavaScript Code - Selection Type to jQuery Selector

- Inspect element to find his id (in my case "f01_0001")

2. Change "if" condition to match your criteria. For example:

var op = document.getElementById("f01_0001").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
    // lowercase comparison for case-insensitivity
    if (op[i].value.toLowerCase() == "red") {
        op[i].disabled = true;
    }
}

Answer 2

I am guessing you want to apply disabled style to 2 options of select item based on value from other item.

Assuming that,

• first column of tabular form is text field and has value that needs to be referenced
• fifth column of tabular form is the one with select item with blue and orange options
• there are multiple rows in the table
• collection of input items that have common name "f01" but different IDs based on row position. For e.g., "f01_000X" where x is row index.
• collection of select items that have common name "f05" but different IDs based on row position. For e.g., "f05_000X" where x is row index.
• stylize select options blue and orange when text field value in first column is "abc". stylize such that the option is non selectable.
• stylize on page load(not on referenced text field value change or region refresh)

Solution,

Loop through all text items on page load, identify row index of current item, get handle of select item's blue and orange options and also referenced text field with help of identified row and then style it accordingly.

Code on how to go about with this,

Javascript Function and Global Variable Declaration

function updateRowStyle(rowIndex) {
    var inp_reference = $("#f01_" + rowIndex);
    var opt_blue = $("#f05_" + rowIndex + " option:contains('blue')");
    var opt_orange = $("#f05_" + rowIndex + " option:contains('orange')");;
    if (inp_reference.val() === "ABC") {
        opt_blue.prop("disabled", true);
        opt_orange.prop("disabled", true);
    } else {
        opt_blue.prop("disabled", false);
        opt_orange.prop("disabled", false);
    }
}

Execute when Page Loads

$("[name=f01]").each(function() {
    updateRowStyle(this.id.split("_").pop());
});