HTML JAVASCRIPT jquery readonly select

[Solved- 4 Answers] how to set select element as readonly

[Solved- 4 Answers] HTML- html select readonly - how to set select element as readonly -According to HTML specs, the select tag in HTML doesn't have a read


According to HTML specs, the select tag in HTML doesn’t have a read only attribute, only a disabled attribute. So if you want to keep the user from changing the drop down, you have to use disabled.

  • The only problem is that disabled HTML form inputs don’t get included in the POST / GET data.
  • What’s the best way to emulate the read only attribute for a select tag, and still get the POST data?

  • You should keep the select element disabled but also add another hidden input with the same name and value.
  • If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.
  • Here is a demo :
html code
$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});
html code
#formdata_container {
    padding: 10px;
}
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
html code
<select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

  • We could also use this demo:
  • Disable all except the selected option:
Html Code
<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>
  • This way the dropdown still works (and submits its value) but the user can not select another value.

This is one way for using Simple jQuery solution

Javascript Code
jQuery('select.readonly option:not(:selected)').attr('disabled',true);

  • The another way of doing a readOnly attribute to a select element is by using css you can do the following:
Javascript Code
$('#selection').css('pointer-events','none');
READ  [10 solved Answers] How to transit height: 0; to height: auto; using CSS

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

1 Comment

Click here to post a comment