How to disable enable select field using jQuery

Question

I would like to create an option in a form like      I would like to order a  selectbox with pizza  pizza   where selectbox is enabled only when checkbox is checked and disabled when not checked   I come up with this code    lt form gt   lt input type  checkbox  id  pizza  name  pizza  value  yes  gt   lt label for  pizza  gt  I would like to order a lt  label gt   lt select name  pizza kind  gt       lt option gt  choose one  lt  option gt       lt option value  margaritha  gt Margaritha lt  option gt       lt option value  hawai  gt Hawai lt  option gt   lt  select gt  pizza   lt  form gt    lt script src  http   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt   lt  script gt   lt script gt  var update pizza   function          if      pizza   is   checked                  pizza kind   removeAttr  disabled              else               pizza kind   prop  disabled    disabled                update pizza       pizza   change update pizza    lt  script gt    I tried various methods how to set disabled attribute using  prop     attr    and  disabled   However  nothing happens  When applying to a  lt input type  checkbox  gt  instead of  lt select gt   the code works perfectly   How to disable enable  lt select gt  using jQuery

User · Answer

Just simply use   var update pizza   function               pizza kind   prop  disabled        pizza   prop  checked         update pizza        pizza   change update pizza     DEMO

User · Answer

sorry for answering in old thread but may my code helps other in future i was in same scenario that when check box will be checked then few selected inputs fields will be enable other wise disabled        id   chkAddressChange     click function          var checked     this  is   checked        if  checked                DisabledInputs   removeAttr  disabled          else               DisabledInputs   attr  disabled    disabled

User · Answer

Your select doesn t have an ID  only a name  You ll need to modify your selector       pizza   on  click   function         select name  pizza kind     prop  disabled    this checked         Demo  http   jsbin com imokuj 2 edit

User · Answer

Disabled is a Boolean Attribute of the select element as stated by WHATWG  that means the RIGHT WAY TO DISABLE with jQuery would be  jQuery   selectId   attr  disabled  true     This would make this HTML   lt select id  selectId  name  gender  disabled  disabled  gt       lt option value  -1  gt --Select a Gender-- lt  option gt       lt option value  0  gt Male lt  option gt       lt option value  1  gt Female lt  option gt   lt  select gt    This works for both XHTML and HTML  W3School reference   Yet it also can be done using it as property  jQuery   selectId   prop  disabled    disabled      getting   lt select id  selectId  name  gender  disabled gt    Which only works for HTML and not XTML  NOTE  A disabled element will not be submitted with the form as answered in this question  The disabled form element is not submitted  NOTE2  A disabled element may be greyed out    NOTE3      A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element    TL DR   lt script gt      var update pizza   function              if      pizza   is   checked                      pizza kind   attr  disabled   false             else                   pizza kind   attr  disabled   true                          update pizza           pizza   change update pizza    lt  script gt

User · Answer

Use the following      select   attr  disabled    disabled      Or simply add id  pizza kind  to  lt select gt  tag  like  lt select name  pizza kind  id  pizza kind  gt   jsfiddle link  The reason your code didn t work is simply because     pizza kind   isn t selecting the  lt select gt  element because it does not have id  pizza kind    Edit  actually  a better selector is    select name  pizza kind      jsfiddle link

User · Answer

You would like to use code like this    lt form gt     lt input type  checkbox  id  pizza  name  pizza  value  yes  gt     lt label for  pizza  gt I would like to order a lt  label gt     lt select id  pizza kind  name  pizza kind  gt       lt option gt  choose one  lt  option gt       lt option value  margaritha  gt Margaritha lt  option gt       lt option value  hawai  gt Hawai lt  option gt     lt  select gt    pizza   lt  form gt    lt script src  http   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt   lt script gt    var update pizza   function          if      pizza   is   checked                  pizza kind   prop  disabled   false             else               pizza kind   prop  disabled    disabled                   update pizza         pizza   change update pizza    lt  script gt     Here is working example

User · Answer

To be able to disable enable selects first of all your selects need an ID or class  Then you could do something like this   Disable       id   attr  disabled    disabled      Enable       id   removeAttr  disabled

User · Answer

Good question - I think the only way to achieve this is to filter the items in the select   You can do this through a jquery plugin  Check the following link  it describes how to achieve something similar to what you need  Thanks jQuery disable SELECT options based on Radio selected  Need support for all browsers

[jquery] How to disable/enable select field using jQuery?

Examples related to jquery

Examples related to html

Examples related to forms