How to make html <select> element look like "disabled", but pass values?

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

You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});