How to make a dropdown readonly using jquery

Question

I am using the following statement to make it readonly but it is not working        cf 1268591   attr  readonly    readonly       I don t want make it disabled  I want to make it readonly

User · Answer

As  Kanishka said   if we disable a form element it will not be submitted    I have created a snippet for this problem   When the select element is disabled it creates a hidden input field and store the value   When it is enabled it delete the created hidden input fields     More info   x000D   x000D  jQuery document  ready function      x000D    var  dropDown       my-select    x000D      name    dropDown prop  name    x000D       form    dropDown parent  form    x000D   x000D     dropDown data  original-name   name     store the name in the data attribute  x000D   x000D        toggle   on  click   function event    x000D      if   dropDown is   disabled      x000D          enable it  x000D         form find  input type  hidden   name     name        remove       remove the hidden fields if any x000D         dropDown removeClass  disabled     remove disable class  x000D           prop   x000D            name  name  x000D            disabled  false x000D                restore the name and enable  x000D        else   x000D          disable it  x000D        var  hiddenInput       lt input  gt      x000D          type   hidden   x000D          name  name  x000D          value   dropDown val   x000D            x000D         form append  hiddenInput     append the hidden field with same name and value from the dropdown field  x000D         dropDown addClass  disabled     disable class x000D           prop   x000D             name   name     1   x000D            disabled  true x000D                change name and disbale  x000D        x000D        x000D      x000D    Optional   x000D   x000D  select disabled   x000D    color  graytext  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form action     name  my-form  gt  x000D     lt select id  my-select  name  alpha  gt  x000D       lt option value  A  gt A lt  option gt  x000D       lt option value  B  gt B lt  option gt  x000D       lt option value  C  gt C lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   lt br  gt  x000D   lt button id  toggle  gt toggle enable disable lt  button gt  x000D   x000D   x000D

User · Answer

Setting an element with disabled will not submit the data  however select elements don t have readonly   You can simulate a readonly on select using CSS for styling and JS to prevent change with tab   select readonly      background   eee    pointer-events  none    touch-action  none      Then use it like   var readonly select      select      readonly select  attr  readonly   true  attr  data-original-value     readonly select  val    on  change   function i          i target  val   this  attr  data-original-value           Result    x000D   x000D       Updated 08 2018 to prevent changing value with tab x000D     a   on  click   function     x000D  var readonly select      select    x000D    readonly select  attr  readonly   true  attr  data-original-value     readonly select  val    on  change   function i    x000D     i target  val   this  attr  data-original-value     x000D      x000D      x000D  select readonly    x000D    background   eee  x000D    pointer-events  none  x000D    touch-action  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a href     gt Click here to enable readonly lt  a gt  x000D   lt select gt  x000D   lt option gt Example 1 lt  option gt  x000D   lt option selected gt Example 2 lt  option gt  x000D   lt option gt Example 3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

This line makes selects with the readonly attribute read-only      select readonly readonly  option not  selected    prop  disabled   true

User · Answer

Simple jquery to remove not selected options       your dropdown id option not  selected    remove

User · Answer

Easiest option for me was to make select as readonly and add    onmousedown  return false  onkeydown  return false    You don t need to write any extra logic  No hidden inputs or disabled and then re-enabled on form submit

User · Answer

There is no such thing as a read-only drop-down  What you could do is reset it to the first value manually after each change      select   change function event          this  val   this  find  option   first   val           http   jsfiddle net 4aHcD

User · Answer

It is an old article  but i want to warn people who will find it  Be careful with disabled attribute with got element by name  Strange but it seems not too work   this do not work    lt script language  JavaScript  gt  function onChangeFullpageCheckbox            name img size   attr  disabled      fullpage   attr  checked      lt  script gt    this work    lt script language  JavaScript  gt  function onChangeFullpageCheckbox             img size   attr  disabled      fullpage   attr  checked      lt  script gt    Yes  i know that i better should use prop and not attr  but at least now prop will not work because of old version of jquery  and now i cant update it  dont ask why    html difference is only added id        lt select name  img size  class  dropDown  id  img size  gt   lt option value  200  gt 200px  lt  option gt  lt option value  300  gt 300px  lt  option gt  lt option value  400  gt 400px  lt  option gt  lt option value  500  gt 500px  lt  option gt  lt option value  600  selected    gt 600px  lt  option gt  lt option value  800  gt 800px  lt  option gt  lt option value  900  gt 900px  lt  option gt  lt option value  1024  gt 1024px  lt  option gt  lt  select gt    lt input type  checkbox  name  fullpage  id  fullpage  onChange  onChangeFullpageCheckbox      gt         I have not found any mistakes in the script  and in the version with name  there was no errors in console  But ofcourse it can be my mistake in code  Seen on  Chrome 26 on Win 7 Pro  Sorry for bad grammar

User · Answer

Try to make empty string when  keypress up    The Html is    lt input id  cf 1268591  style  width 60px line-height 16px border 1px solid  ccc  gt    The Jquery is       cf 1268591   combobox     url  your url     valueField  id     textField  text     panelWidth   350     panelHeight   200            make after keyup with empty string  var tb       cf 1268591   combobox  textbox      tb bind  keyup  function e     this value

User · Answer

cf 1268591   attr  disabled   true      drop down is always read only   what you can do is make it disabled   if you work with a form   the disabled fields does not submit   so use a hidden field to store disabled dropdown value

User · Answer

This code will first store the original selection on each dropdown  Then if the user changes the selection it will reset the dropdown to its original selection   http   jsfiddle net 4aHcD 22     store the original selection    select  selected   each function          this  parent   data  default   this          change the selction back to the original    select   change function e            this  data  default    prop  selected   true

User · Answer

Maybe you can try this way  function myFunction           select id  myID    attr  disabled   true      var txtSelect      select id  myID  option selected    text        This sets the first value of the drop-down as the default and it seems readonly

User · Answer

To simplify things here s a jQuery plugin that does that without the hassle  https   github com haggen readonly

User · Answer

Try this one   without disabling the selected value        cf 1268591 option not  selected    prop  disabled   true     It works for me

User · Answer

You could also disable it and at the moment that you make the submit call enable it  I think is the easiest way

User · Answer

This is what you are looking for       cf 1268591   attr  style    pointer-events  none       Works like a charm

User · Answer

I ve found  a better way to do this is to use CSS to remove pointer-events and modify the opacity on the drop down  try 0 5   This gives the appearance to the user that it is disabled as normal  but still posts data   Granted this has some issues with backwards compatibility  but is in my opinion a better option than getting around the annoying disabled readonly issue

User · Answer

I d make the field disabled   Then  when the form submits  make it not disabled   In my opinion  this is easier than having to deal with hidden fields     disable the field     myFieldID   prop   disabled   true                  right before the form submits  we re-enable the fields  to make them submit       myFormID    submit function  event             myFieldID   prop   disabled   false

User · Answer

Here is a slight variation on the other answers that suggest using disabled  Since the  disabled  attribute can actually have any value and still disable  you can set it to readonly  like disabled  readonly   This will disable the control as usual  and will also allow you to easily style it differently than regular disabled controls  with CSS like   select disabled readonly             styles you like for read-only     If you want data to be included submit  use hidden fields or enable before submit  as detailed in the other answers

User · Answer

It  s work very well      cf 1268591 option not  selected    prop  disabled   true     With this I can see the options but I can t select it

User · Answer

I had the same problem  my solution was to disable all options not selected  Very easy with jQuery      option not  selected    attr  disabled   true     Edit    If you have multiple dropdowns on same page  disable all not selected options on select-ID as below       select field id option not  selected    attr  disabled   true

User · Answer

html5 supporting                  cCity   attr  disabled    disabled              cCity   addClass  not-allow

[jquery] How to make a dropdown readonly using jquery?

Examples related to jquery