How to make html <select> element look like

Question

When I'm disabling a

<select name="sel" disabled>
    <option>123</option>
</select>

element, it doesnt pass its variable.

What to do to look it like disabled, but be in "normal" state?

This is because I have a list of "selects", and sometimes some of them have single value, so user should understand that it has only one value without clicking it.

Answer 1

My solution was to create a disabled class in CSS:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

and then your select would be:

<select name="sel" class="disabled">
    <option>123</option>
</select>

The user would be unable to pick any values but the select value would still be passed on form submission.

Answer 2

Wow, I had the same problem, but a line of code resolved my problem. I wrote

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

I send the form to a php script then it prints the correct value for each options while it was "null" before.

Tell me if this works out. I wonder if this only works on mine somehow.