Vorrei creare un'opzione in una forma come

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

dove selectbox è abilitato solo quando la casella è selezionata e disabilitata quando non è selezionata.

Mi viene in mente questo codice:

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

Ho provato vari metodi come impostare l'attributo disabilitato utilizzando .prop(), .attr()e .disabled=. Tuttavia, non succede nulla. Quando si applica a un <input type="checkbox">invece di <select>, il codice funziona perfettamente.

Come disabilitare / abilitare <select>utilizzando jQuery?

Ti piacerebbe usare un codice come questo:

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

Ecco un esempio funzionante

Per poter disabilitare / abilitare le selezioni, prima di tutto le selezioni richiedono un ID o una classe. Quindi potresti fare qualcosa del genere:

Disattivare:

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

Abilitare:

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

Disabili è un booleano attributo del elemento di selezione come affermato da WHATWG , che significa il DIRITTO modo per disattivare con jQuery sarebbe

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

Questo renderebbe questo 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>

Funziona sia con XHTML che HTML (riferimento W3School)

Eppure può anche essere fatto usandolo come proprietà

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

ottenere

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

Che funziona solo per HTML e non per XTML

NOTA: un elemento disabilitato non verrà inviato con il modulo come indicato in questa domanda: l'elemento del modulo disabilitato non viene inviato

NOTA 2: un elemento disabilitato potrebbe essere disattivato.

NOTA 3:

Un controllo del modulo che è disabilitato deve impedire che eventuali eventi di clic in coda sull'origine dell'attività di interazione dell'utente vengano inviati sull'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 semplicemente usare:

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

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

DEMO

Utilizza il seguente:

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

O semplicemente aggiungi id="pizza_kind"al <select>tag, come <select name="pizza_kind" id="pizza_kind">: jsfiddle link

Il motivo per cui il tuo codice non ha funzionato è semplicemente perché $("#pizza_kind")non sta selezionando l' <select>elemento perché non ha id="pizza_kind".

Modifica: in realtà, un selettore migliore è $("select[name='pizza_kind']"): jsfiddle link

Il tuo selectnon ha un ID, solo un nome. Dovrai modificare il tuo selettore:

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

Demo: http://jsbin.com/imokuj/2/edit

scusate la risposta nel vecchio thread, ma il mio codice potrebbe aiutare altri in futuro. Ero nello stesso scenario che quando la casella di controllo sarà selezionata, pochi campi di input selezionati saranno abilitati per altri disabili.

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

Buona domanda: penso che l'unico modo per raggiungere questo obiettivo sia filtrare gli elementi nella selezione.
Puoi farlo tramite un plugin jquery. Controlla il seguente link, descrive come ottenere qualcosa di simile a ciò di cui hai bisogno. Grazie
jQuery disabilita le opzioni SELEZIONA in base alla radio selezionata (è necessario il supporto per tutti i browser)