Hyperscript not disabling select element when it changes

Question

I'm trying to make HTMX and Hyperscript work together on a select element, what I expect:

• When user change select value it disables the select element and when it htmx finishes it removes the disabled attribute

What happens:

• Everything works fine, but it is not disabling the select element itself, it disabling the child option elements

<select>
    <option disabled value="1">Item 1</option>
    <option disabled value="2">Item 2</option>
    <option disabled value="3">Item 3</option>
</select>

Best code that I can think of:

<select 
    name="selectId" 
    id="selectId"

    hx-get="/v2/Url?param=value"
    hx-target="#targetId" 

    _="on change toggle @@disabled until htmx:afterOnLoad">

    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>


<div id="targetId">

</div>