HTML form readonly SELECT tag/input

Question

According to HTML specs, the select tag in HTML doesn\'t have a readonly attribute, only a disabled attribute. So if you want to keep

Answer 1

A bit late to the party. But this seems to work flawlessly for me

select[readonly] {
    pointer-events:none;
}

Answer 2

This is the simplest and best solution. You will set a readolny attr on your select, or anyother attr like data-readonly, and do the following

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

Answer 3

Simply, remove the disabled attribute before submit the form.

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

Answer 4

If you disable a form field, this won't be sent when form is submitted. So if you need a readonly that works like disabled but sending values do this :

After any change in readonly properties of an element.

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

Answer 5

Rather than the select itself, you could disable all of the options except for the currently selected option. This gives the appearance of a working drop-down, but only the option you want passed in is a valid selection.

Answer 6

We could also use this

Disable all except the selected option:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

This way the dropdown still works (and submits its value) but the user can not select another value.

Demo