How to disable/enable select field using jQuery?
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');
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