Eu gostaria de criar uma opção em um formulário como

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

onde a caixa de seleção está ativada apenas quando a caixa de seleção está marcada e desativada quando não está marcada.

Eu venho com 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>

Eu tentei vários métodos como definir atributo disabled usando .prop(), .attr()e .disabled=. No entanto, nada acontece. Ao aplicar a um em <input type="checkbox">vez de <select>, o código funciona perfeitamente.

Como desativar / ativar o <select>uso do jQuery?

Você gostaria de usar 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>

Aqui está um exemplo de trabalho

Para poder desabilitar / habilitar as seleções, primeiro é necessário que você selecione uma ID ou classe. Então você poderia fazer algo assim:

Desativar:

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

Habilitar:

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

Desativado é um booleano Atributo do elemento select como afirma WHATWG , isso significa que o DIREITO maneira de desativar com jQuery seria

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

Isso tornaria esse 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>

Isso funciona para XHTML e HTML (referência W3School)

No entanto, isso também pode ser feito usando-o como propriedade

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

obtendo

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

O que funciona apenas para HTML e não para XTML

NOTA: Um elemento desabilitado não será enviado com o formulário conforme respondido nesta pergunta: O elemento desabilitado do formulário não é enviado

NOTA2: Um elemento desativado pode estar acinzentado.

NOTA 3:

Um controle de formulário desabilitado deve impedir que quaisquer eventos de clique que estão na fila na origem da tarefa de interação com o usuário sejam despachados no 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>

Basta usar:

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

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

DEMONSTRA

Use o seguinte:

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

Ou simplesmente adicione id="pizza_kind"à <select>tag, como <select name="pizza_kind" id="pizza_kind">: jsfiddle link

O motivo pelo qual seu código não funcionou é simplesmente porque $("#pizza_kind")não está selecionando o <select>elemento porque ele não possui id="pizza_kind".

Edit: na verdade, um seletor melhor é $("select[name='pizza_kind']"): jsfiddle link

O seu selectnão tem um ID, apenas um nome. Você precisará modificar seu seletor:

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

Demonstração: http://jsbin.com/imokuj/2/edit

desculpe-me por responder no tópico antigo, mas o meu código pode ajudar outros no futuro.i estava no mesmo cenário em que quando a caixa de seleção estiver marcada, poucos campos de entrada selecionados serão habilitados de outra forma desativada.

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

Boa pergunta - acho que a única maneira de conseguir isso é filtrar os itens no select.
Você pode fazer isso através de um plugin jquery. Verifique o link a seguir, descreve como obter algo semelhante ao que você precisa. Obrigado
jQuery desativar opções SELECT com base no rádio selecionado (precisa de suporte para todos os navegadores)