{"id":182,"date":"2017-03-13T14:08:55","date_gmt":"2017-03-13T14:08:55","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=182"},"modified":"2017-10-15T14:10:00","modified_gmt":"2017-10-15T08:40:00","slug":"how-set-html-select-element-as-readonly","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-set-html-select-element-as-readonly\/","title":{"rendered":"[Solved- 4 Answers] how to set select element as readonly"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM :<\/label><br \/>\nAccording to HTML specs, the\u00a0select\u00a0tag in HTML doesn&#8217;t have a\u00a0read only\u00a0attribute, only a\u00a0disabled\u00a0attribute. So if you want to keep the user from changing the drop down, you have to use\u00a0disabled.<\/p>\n<ul>\n<li>The only problem is that disabled HTML form inputs don&#8217;t get included in the POST \/ GET data.<\/li>\n<li>What&#8217;s the best way to emulate the\u00a0read only\u00a0attribute for a\u00a0select\u00a0tag, and still get the POST data?<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1 :<\/label><\/p>\n<ul>\n<li>You should keep the\u00a0select\u00a0element\u00a0disabled\u00a0but also add another hidden\u00a0input\u00a0with the same name and value.<\/li>\n<li>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.<\/li>\n<li>Here is a demo :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">$(&#039;#mainform&#039;).submit(function() {<br\/>    $(&#039;#formdata_container&#039;).show();<br\/>    $(&#039;#formdata&#039;).html($(this).serialize());<br\/>    return false;<br\/>});<br\/><br\/>$(&#039;#enableselect&#039;).click(function() {<br\/>    $(&#039;#mainform input[name=animal]&#039;)<br\/>        .attr(&quot;disabled&quot;, true);<br\/>    <br\/>    $(&#039;#animal-select&#039;)<br\/>        .attr(&#039;disabled&#039;, false)<br\/>    \t.attr(&#039;name&#039;, &#039;animal&#039;);<br\/>    <br\/>    $(&#039;#enableselect&#039;).hide();<br\/>    return false;<br\/>});<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">#formdata_container {<br\/>    padding: 10px;<br\/>}<\/code><\/pre> <\/div>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;<br\/>&lt;div&gt;<br\/>    &lt;form id=&quot;mainform&quot;&gt;<br\/>        &lt;select id=&quot;animal-select&quot; disabled=&quot;true&quot;&gt;<br\/>            &lt;option value=&quot;cat&quot; selected&gt;Cat&lt;\/option&gt;<br\/>            &lt;option value=&quot;dog&quot;&gt;Dog&lt;\/option&gt;<br\/>            &lt;option value=&quot;hamster&quot;&gt;Hamster&lt;\/option&gt;<br\/>        &lt;\/select&gt;<br\/>        &lt;input type=&quot;hidden&quot; name=&quot;animal&quot; value=&quot;cat&quot;\/&gt;<br\/>        &lt;button id=&quot;enableselect&quot;&gt;Enable&lt;\/button&gt;<br\/>        <\/code><\/pre> <\/div>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;select name=&quot;color&quot;&gt;<br\/>            &lt;option value=&quot;blue&quot; selected&gt;Blue&lt;\/option&gt;<br\/>            &lt;option value=&quot;green&quot;&gt;Green&lt;\/option&gt;<br\/>            &lt;option value=&quot;red&quot;&gt;Red&lt;\/option&gt;<br\/>        &lt;\/select&gt;<br\/><br\/>        &lt;input type=&quot;submit&quot;\/&gt;<br\/>    &lt;\/form&gt;<br\/>&lt;\/div&gt;<br\/><br\/>&lt;div id=&quot;formdata_container&quot; style=&quot;display:none&quot;&gt;<br\/>    &lt;div&gt;Submitted data:&lt;\/div&gt;<br\/>    &lt;div id=&quot;formdata&quot;&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 2 :<\/label><\/p>\n<ul>\n<li>We could also use this demo:<\/li>\n<li>Disable all except the selected option:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;select&gt;<br\/>&lt;option disabled=&quot;disabled&quot;&gt;1&lt;\/option&gt;<br\/>&lt;option selected=&quot;selected&quot;&gt;2&lt;\/option&gt;<br\/>&lt;option disabled=&quot;disabled&quot;&gt;3&lt;\/option&gt;<br\/>&lt;\/select&gt;<\/code><\/pre> <\/div>\n<ul>\n<li>This way the dropdown still works (and submits its value) but the user can not select another value.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3 :<\/label><\/p>\n<p>This is one way for using Simple jQuery solution<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Javascript Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">jQuery(&#039;select.readonly option:not(:selected)&#039;).attr(&#039;disabled&#039;,true);<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 4 :<\/label><\/p>\n<ul>\n<li>The another way of doing a readOnly attribute to a select element is by using css you can do the following:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Javascript Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#selection&#039;).css(&#039;pointer-events&#039;,&#039;none&#039;);<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Solved- 4 Answers] HTML- html select readonly &#8211; how to set select element as readonly -According to HTML specs, the\u00a0select\u00a0tag in HTML doesn&#8217;t have a\u00a0read<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,275,83472,83474,83473],"tags":[597,595,598,593,596,599,594,379,372,398,367,592,364,390],"class_list":["post-182","post","type-post","status-publish","format-standard","hentry","category-html","category-javascript","category-jquery-2","category-readonly","category-select","tag-bootstrap-select-readonly","tag-how-to-make-dropdown-readonly-in-javascript","tag-how-to-make-dropdown-readonly-in-jsp","tag-how-to-make-select-box-readonly-in-javascript","tag-how-to-make-select-box-readonly-in-php","tag-html-select-option-readonly-attribute","tag-html-select-readonly-vs-disable","tag-html5-readonly-select","tag-html5-select-readonly","tag-select-box-readonly","tag-select-readonly","tag-select-readonly-html","tag-select-tag","tag-select-value-html"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/182\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}