{"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\u2019t 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\u2019t get included in the POST \/ GET data.<\/li>\n<li>What\u2019s 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[pastacode lang=\u201dmarkup\u201d manual=\u201d%24(\u2018%23mainform\u2019).submit(function()%20%7B%0A%20%20%20%20%24(\u2018%23formdata_container\u2019).show()%3B%0A%20%20%20%20%24(\u2018%23formdata\u2019).html(%24(this).serialize())%3B%0A%20%20%20%20return%20false%3B%0A%7D)%3B%0A%0A%24(\u2018%23enableselect\u2019).click(function()%20%7B%0A%20%20%20%20%24(\u2018%23mainform%20input%5Bname%3Danimal%5D\u2019)%0A%20%20%20%20%20%20%20%20.attr(%22disabled%22%2C%20true)%3B%0A%20%20%20%20%0A%20%20%20%20%24(\u2018%23animal-select\u2019)%0A%20%20%20%20%20%20%20%20.attr(\u2018disabled\u2019%2C%20false)%0A%20%20%20%20%09.attr(\u2018name\u2019%2C%20\u2019animal\u2019)%3B%0A%20%20%20%20%0A%20%20%20%20%24(\u2018%23enableselect\u2019).hide()%3B%0A%20%20%20%20return%20false%3B%0A%7D)%3B%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%23formdata_container%20%7B%0A%20%20%20%20padding%3A%2010px%3B%0A%7D%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%3Cdiv%3E%0A%20%20%20%20%3Cform%20id%3D%22mainform%22%3E%0A%20%20%20%20%20%20%20%20%3Cselect%20id%3D%22animal-select%22%20disabled%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22cat%22%20selected%3ECat%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22dog%22%3EDog%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22hamster%22%3EHamster%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22animal%22%20value%3D%22cat%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22enableselect%22%3EEnable%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cselect%20name%3D%22color%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22blue%22%20selected%3EBlue%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22green%22%3EGreen%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22red%22%3ERed%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22submit%22%2F%3E%0A%20%20%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22formdata_container%22%20style%3D%22display%3Anone%22%3E%0A%20%20%20%20%3Cdiv%3ESubmitted%20data%3A%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20id%3D%22formdata%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cselect%3E%0A%3Coption%20disabled%3D%22disabled%22%3E1%3C%2Foption%3E%0A%3Coption%20selected%3D%22selected%22%3E2%3C%2Foption%3E%0A%3Coption%20disabled%3D%22disabled%22%3E3%3C%2Foption%3E%0A%3C%2Fselect%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201djavascript\u201d manual=\u201djQuery(\u2018select.readonly%20option%3Anot(%3Aselected)\u2019).attr(\u2018disabled\u2019%2Ctrue)%3B%0A\u201d message=\u201dJavascript Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23selection\u2019).css(\u2018pointer-events\u2019%2C\u2019none\u2019)%3B%0A\u201d message=\u201dJavascript Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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}]}}