html - How to disable/enable select field using jQuery?

ID : 20070

viewed : 15

Tags : jqueryhtmlformsjquery

Top 5 Answer for html - How to disable/enable select field using jQuery?

vote vote


You would like to use code like this:

<form>   <input type="checkbox" id="pizza" name="pizza" value="yes">   <label for="pizza">I would like to order a</label>   <select id="pizza_kind" name="pizza_kind">     <option>(choose one)</option>     <option value="margaritha">Margaritha</option>     <option value="hawai">Hawai</option>   </select>   pizza. </form>  <script src=""></script> <script>   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); </script> 

​Here is working example

vote vote


To be able to disable/enable selects first of all your selects need an ID or class. Then you could do something like this:


$('#id').attr('disabled', 'disabled'); 


vote vote


Disabled is a Boolean Attribute of the select element as stated by WHATWG, that means the RIGHT WAY TO DISABLE with jQuery would be


This would make this HTML

<select id="selectId" name="gender" disabled="disabled">     <option value="-1">--Select a Gender--</option>     <option value="0">Male</option>     <option value="1">Female</option> </select> 

This works for both XHTML and HTML (W3School reference)

Yet it also can be done using it as property

jQuery("#selectId").prop('disabled', 'disabled'); 


<select id="selectId" name="gender" disabled> 

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.


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.


<script>     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); </script> 
vote vote


Just simply use:

var update_pizza = function () {      $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked')); };  update_pizza(); $("#pizza").change(update_pizza); 


vote vote


Use the following:

$("select").attr("disabled", "disabled"); 

Or simply add id="pizza_kind" to <select> tag, like <select name="pizza_kind" id="pizza_kind">: jsfiddle link

The reason your code didn't work is simply because $("#pizza_kind") isn't selecting the <select> element because it does not have id="pizza_kind".

Edit: actually, a better selector is $("select[name='pizza_kind']"): jsfiddle link

Top 3 video Explaining html - How to disable/enable select field using jQuery?