How to Disable Specific Options in Select Many Item using Template Directives and CSS

When working with the Select Many component in Oracle APEX, there is often a need to limit what the user can select. A classic example is a book ordering system: we want to show all books, but the ones that are currently unavailable should be visible as read-only – without the possibility to select them.

Below is a proven way to achieve this using Template Directives and CSS.

Step 1: Prepare the List of Values (LOV)

The core of this solution is a properly configured List of Values in Shared Components.

1. Create a new LOV called LOV_BOOKS based on the following SQL query:

    select 
        TITLE as d,
        ID as r,
        IS_AVAILABLE
    from BOOKS
   

   The column IS_AVAILABLE contains:

   • 'Y' – available

   • 'N' – not available

2. Important step:
   Go to Additional Display Columns, click Select Columns, and add all available columns (including IS_AVAILABLE). This allows us to reference the availability status inside the HTML template.

Step 2: Configure the Select Many item

Back on the application page, create a Select Many item and assign the LOV_BOOKS list to it.
To add the “read-only” logic, we will use Value HTML Expression in the Settings section.

Insert the following template directive:

<div class="{case IS_AVAILABLE/}{when N/}is-readonly-marker{endcase/}">
    &APEX$ITEM%d.
</div>

How does this work?
The {case} directive checks the value of the IS_AVAILABLE column.
If the value is 'N', the class is-readonly-marker is added to the surrounding div.

As a result, for an unavailable book (for example Crime and Punishment), the generated DOM structure will look like this:

<li class="a-ComboSelect-item" data-value="8" ...>
    <span class="a-ComboSelect-action u-selector"></span>
    <div class="a-ComboSelect-customContent">
        <div class="is-readonly-marker">
            Crime and Punishment
        </div>
    </div>
</li>

Step 3: CSS magic (the :has() selector)

Adding a class inside the item is not enough - we need to block the entire list row (li).
For this, we use :has() selector, which allows styling a parent element based on its children.

In Page Settings → CSS → Inline, add the following code:

/* Styling disabled items in APEX Select Many */
.a-ComboSelect-item:has(.is-readonly-marker) {
    pointer-events: none !important; /* Disable clicks and checkbox changes */
    background-color: #f0f0f0 !important; /* Visual background difference */
    opacity: 0.7;
    cursor: not-allowed;
}

/* Fade text and checkbox visually */
.a-ComboSelect-item:has(.is-readonly-marker) :is(.a-ComboSelect-customContent, .u-selector) {
    color: #888 !important;
    filter: grayscale(1);
}

Final result

With this approach, you get a clean and user-friendly interface where:

• Available books (IS_AVAILABLE = 'Y') work normally.

• Unavailable books (IS_AVAILABLE = 'N') are greyed out, the checkbox is disabled, and clicking has no effect.