Comment désactiver/activer sélectionnez le champ à l'aide de jQuery?

Question

Je voudrais créer une option dans un formulaire

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

où selectbox est activée uniquement lorsque la case est cochée et désactivé lorsqu'il 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 pour définir désactivé attribut à l'aide de .prop(), .attr(), et .disabled=. Cependant, rien ne se passe. Lors de l'application d'un <input type="checkbox"> au lieu de <select>, le code fonctionne parfaitement.

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

Answer 1

Vous souhaitez utiliser un code comme ceci:

<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 de travail exemple

Answer 2

Pour être en mesure de désactiver/activer sélectionne tout d'abord votre sélectionne besoin d'un ID ou une classe. Ensuite, vous pourriez faire quelque chose comme ceci:

essayez suivantes:

Désactiver:

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

Activer:

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

Answer 3

Tout simplement utiliser:

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

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

DÉMO

Answer 4

Utiliser les éléments suivants:

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

Ou tout simplement ajouter id="pizza_kind" de <select> balise, comme <select name="pizza_kind" id="pizza_kind">: jsfiddle lien

La raison que votre code ne fonctionne pas, c'est simplement que $("#pizza_kind") n'est pas de sélectionner l' <select> élément parce qu'il ne dispose pas d' id="pizza_kind".

Edit: en fait, une meilleure sélection est $("select[name='pizza_kind']"): jsfiddle lien

Answer 5

Votre select n'a pas un ID, un seul nom. Vous aurez besoin de modifier votre sélection:

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

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