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)

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

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

Just simply use:

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


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

DEMO ​

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

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

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

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>

To disable a select:

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

To enable a select:

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