Je souhaite créer une option sous une forme telle que

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

où la boîte de sélection est activée uniquement lorsque la case est cochée et désactivée lorsqu'elle n'est pas cochée.

Je viens avec ce code:

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

J'ai essayé différentes méthodes comment définir l' attribut désactivé à l' aide .prop(), .attr()et .disabled=. Cependant, rien ne se passe. Lors de l'application à un <input type="checkbox">au lieu de <select>, le code fonctionne parfaitement.

Comment désactiver / activer à l' <select>aide de jQuery?

Vous souhaitez utiliser un code comme celui-ci:

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

Voici un exemple de travail

Pour pouvoir désactiver / activer les sélections, vos sélections ont tout d'abord besoin d'un identifiant ou d'une classe. Ensuite, vous pouvez faire quelque chose comme ceci:

Désactiver:

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

Activer:

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

Disabled est un attribut booléen de l' élément select comme indiqué par WHATWG , ce qui signifie que la BONNE FAÇON DE DÉSACTIVER avec jQuery serait

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

Cela rendrait ce 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>

Cela fonctionne à la fois pour XHTML et HTML (référence W3School)

Pourtant, cela peut aussi être fait en l'utilisant comme propriété

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

obtenir

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

Ce qui ne fonctionne que pour HTML et non pour XTML

REMARQUE: Un élément désactivé ne sera pas soumis avec le formulaire comme répondu à cette question: L'élément de formulaire désactivé n'est pas soumis

REMARQUE 2: Un élément désactivé peut être grisé.

NOTE 3:

Un contrôle de formulaire désactivé doit empêcher que les événements de clic mis en file d'attente sur la source de la tâche d'interaction utilisateur ne soient distribués sur l'élément.

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>

Utilisez simplement:

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

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

DEMO

Utilisez le suivant:

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

Ou ajoutez simplement id="pizza_kind" à<select> balise, comme <select name="pizza_kind" id="pizza_kind">: lien jsfiddle

La raison pour laquelle votre code n'a pas fonctionné est simplement parce que $("#pizza_kind") ne sélectionnez pas le<select> élément car il n'a pasid="pizza_kind" .

Edit: en fait, un meilleur sélecteur est $("select[name='pizza_kind']"): lien jsfiddle

Votre selectn'a pas d'identifiant, seulement un nom. Vous devrez modifier votre sélecteur:

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

Démo: http://jsbin.com/imokuj/2/edit

désolé d'avoir répondu dans l'ancien fil, mais mon code peut aider les autres à l'avenir. J'étais dans le même scénario que lorsque la case à cocher sera cochée, quelques champs d'entrées sélectionnés seront activés autrement.

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

Bonne question - je pense que le seul moyen d'y parvenir est de filtrer les éléments de la sélection.
Vous pouvez le faire via un plugin jquery. Consultez le lien suivant, il décrit comment réaliser quelque chose de similaire à ce dont vous avez besoin. Merci
jQuery désactiver les options SELECT en fonction de la radio sélectionnée (besoin de support pour tous les navigateurs)