How to make html select element look like disabled but pass values

Question

When I m disabling a    lt select name  sel  disabled gt       lt option gt 123 lt  option gt   lt  select gt    element  it doesnt pass its variable   What to do to look it like disabled  but be in  normal  state   This is because I have a list of  selects   and sometimes some of them have single value  so user should understand that it has only one value without clicking it

User · Accepted Answer

You can keep it disabled as desired  and then remove the disabled attribute before the form is submitted       myForm   submit function            select   removeAttr  disabled          Note that if you rely on this method  you ll want to disable it programmatically as well  because if JS is disabled or not supported  you ll be stuck with the disabled select     document  ready function            select   attr  disabled    disabled

User · Answer

One could use an additional hidden input element with the same name and value as that of the disabled list  This will ensure that the value is passed in   POST variables   Eg    x000D   x000D   lt select name  sel  disabled gt  lt option gt 123 lt  select gt  x000D   lt input type  hidden  name  sel  value 123 gt  x000D   x000D   x000D

User · Answer

My solution was to create a disabled class in CSS    disabled       pointer-events  none      cursor  not-allowed      and then your select would be    lt select name  sel  class  disabled  gt       lt option gt 123 lt  option gt   lt  select gt    The user would be unable to pick any values but the select value would still be passed on form submission

User · Answer

If you can supply a default value for your selects  then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element  as these don t post a value if left unchecked    lt input type  hidden  name  myfield  value  default    gt   lt select name  myfield  gt       lt option value  default  selected  selected  gt Default lt  option gt       lt option value  othervalue  gt Other value lt  option gt       lt  --       -- gt   lt  select gt    This will actually post the value  default   without quotes  obviously  if the select is disabled by javascript  or jQuery  or even if your code writes the html disabling the element itself with the attribute  disabled  disabled

User · Answer

if you don t want add the attr disabled can do it programmatically  can disable the edition into the  lt select class  yourClass  gt  element with this code     bloqueo selects     block all selects   jQuery document  on  focusin    select yourClass   function  event        var  selectDiabled   jQuery this  attr  disabled    disabled        setTimeout function     selectDiabled removeAttr  disabled       30           if you want try it can see it here  https   jsfiddle net 9kjqjLyq

User · Answer

Wow  I had the same problem  but a line of code resolved my problem  I wrote   last child topic find        prop   disabled   true     last child topic find   option    prop   disabled   false        This seems to work on mine   I send the form to a php script then it prints the correct value for each options while it was  null  before   Tell me if this works out  I wonder if this only works on mine somehow

User · Answer

Add a class  disabled and use this CSS     disabled  border  1px solid  999  color   333  opacity  0 5    disabled option  color   000  opacity  1      Demo  http   jsfiddle net ZCSRq

User · Answer

lt select id  test  name  sel  gt     lt option disabled gt 1 lt  option gt     lt option disabled gt 2 lt  option gt   lt  select gt       or you can use jQuery      test option not  selected    prop  disabled   true

[html] How to make html <select> element look like "disabled", but pass values?

Examples related to html

Examples related to select

Examples related to disabled-input