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:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

I tried various methods how to set disabled attribute using .prop(), .attr(), and .disabled=. However, nothing happens. When applying to a <input type="checkbox"> instead of <select>, the code works perfectly.

How to disable/enable <select> using jQuery?

Eightieth

hello, does this approach work on IE 10? don't know how to enable a select field in IE 10. – Bax

Answer 1

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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

Preindicate

$('#pizza_kind').prop('disabled', false); and $('#pizza_kind').prop('disabled', true);. As jQuery's documentation says: Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value. – Goodsized

for jQuery 3 it should be "$('#pizza_kind').prop('disabled', true/false);" as far as I know – Sapindaceous

What is $(update_pizza); doing? Wrapping the function in a jquery object? – Calif

Answer 2

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');

Elwood

"The .prop() method should be used to set disabled and checked instead of the .attr() method" source: api.jquery.com/prop – Musser

this should be the selected answer .. much better for skimming :) – Thant

this should NOT be the answer .removeAttr() no longer sets properties to false jquery.com/upgrade-guide/3.0/… https://mcmap.net/q/40927/-how-to-remove-quot-disabled-quot-attribute-using-jquery – Kelp

Answer 3

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

<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');

getting

<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.

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

<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>

Imogene

Answer 4

Just simply use:

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

update_pizza();
$("#pizza").change(update_pizza);

DEMO ​

Vacation

Answer 5

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

Belda

Answer 6

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');
    }
});

Orangutan

Answer 7

To disable a select:

$("#your-selector").prop("disabled", true);

To enable a select:

$("#your-selector").prop("disabled", false); 

Dour

Answer 8

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

Bakerman

Answer 9

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)

Sacha