Me gustaría crear una opción en una forma como

[] I would like to order a [selectbox with pizza] pizza

donde selectbox está habilitado solo cuando la casilla de verificación está marcada y deshabilitada cuando no está marcada.

Se me ocurre este código:

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

He intentado varios métodos de cómo establecer el atributo de personas con discapacidad utilizando .prop(), .attr()y .disabled=. Sin embargo, no pasa nada. Cuando se aplica a un en <input type="checkbox">lugar de <select>, el código funciona perfectamente.

¿Cómo deshabilitar / habilitar <select>usando jQuery?

Te gustaría usar un código como este:

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

Aquí está el ejemplo de trabajo

Para poder deshabilitar / habilitar selecciones, en primer lugar, sus selecciones necesitan una ID o clase. Entonces podrías hacer algo como esto:

Inhabilitar:

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

Habilitar:

$('#id').removeAttr('disabled');

Disabled es un atributo booleano del elemento select según lo establecido por WHATWG , eso significa que la MANERA CORRECTA DE DESACTIVAR con jQuery sería

jQuery("#selectId").attr('disabled',true);

Esto haría que este 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>

Esto funciona tanto para XHTML como para HTML (referencia de W3School)

Sin embargo, también se puede hacer usándolo como propiedad

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

consiguiendo

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

Que solo funciona para HTML y no para XTML

NOTA: un elemento deshabilitado no se enviará con el formulario como se respondió en esta pregunta: el elemento deshabilitado no se envía

NOTA2: Un elemento deshabilitado puede estar atenuado.

NOTA 3:

Un control de formulario que está deshabilitado debe evitar que cualquier evento de clic que esté en cola en el origen de la tarea de interacción del usuario se envíe al elemento.

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>

Simplemente use:

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

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

DEMO

Use lo siguiente:

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

O simplemente agregue id="pizza_kind"a la <select>etiqueta, como <select name="pizza_kind" id="pizza_kind">: enlace jsfiddle

La razón por la que su código no funcionó es simplemente porque $("#pizza_kind")no está seleccionando el <select>elemento porque no tiene id="pizza_kind".

Editar: en realidad, un mejor selector es $("select[name='pizza_kind']"): enlace jsfiddle

Tu selectno tiene una identificación, solo un nombre. Tendrá que modificar su selector:

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

Demostración: http://jsbin.com/imokuj/2/edit

perdón por responder en el hilo anterior, pero mi código puede ayudar a otros en el futuro. Estaba en el mismo escenario que cuando la casilla de verificación esté marcada, pocos campos de entrada seleccionados se habilitarán de otra manera.

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});

Buena pregunta: creo que la única forma de lograr esto es filtrar los elementos en la selección.
Puede hacerlo a través de un complemento jquery. Consulte el siguiente enlace, que describe cómo lograr algo similar a lo que necesita. Gracias
jQuery deshabilite las opciones SELECCIONAR en función de la Radio seleccionada (Necesita soporte para todos los navegadores)