web-dev-qa-db-fra.com

Comment désactiver / activer un champ de sélection à l'aide de jQuery?

Je voudrais créer une option sous une forme comme

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

où selectbox est activé uniquement lorsque la case à cocher est cochée et désactivé lorsque non coché.

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é diverses méthodes pour définir un attribut désactivé en utilisant .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 <select> en utilisant jQuery?

jqueryhtmlforms
165
izidor

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>

Ici fonctionne exemple

278
Community Driven Business

Pour pouvoir désactiver/activer les sélections, vos sélections nécessitent tout d'abord un identifiant ou une classe. Ensuite, vous pourriez faire quelque chose comme ça:

Désactiver:

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

Activer:

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

Désactivé est un attribut booléen ) du élément de sélection comme indiqué par WHATWG , cela signifie que le DROIT 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 XHTML et HTML (référence W3School)

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

REMARQUE: Un élément désactivé ne sera pas soumis avec le formulaire, comme indiqué dans la réponse à la question suivante: l'élément de formulaire désactivé n'est pas soumis

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

NOTE3:

Un contrôle de formulaire désactivé doit empêcher tout événement de clic mis en file d'attente sur la source de tâches d'interaction utilisateur d'être distribué 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>
20
Azteca

Il suffit simplement d'utiliser:

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

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

DÉMO

16
The System Restart

Utilisez le suivant:

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

Ou ajoutez simplement id="pizza_kind" à la balise <select>, 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électionne pas l'élément <select> car il n'a pas id="pizza_kind".

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

8
K Z

désolé de votre réponse dans l'ancien fil de discussion, mais mon code peut en aider d'autres à l'avenir.Je suis dans le même scénario que lorsque la case à cocher sera cochée, quelques champs d'entrée sélectionnés seront activés autrement désactivés.

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

Votre select n'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

5
Sampson

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. Vérifiez le lien suivant, il décrit comment obtenir quelque chose de similaire à ce dont vous avez besoin. Merci
jQuery désactive les options SELECT en fonction de la radio sélectionnée (support requis pour tous les navigateurs)

2
Joseph Caruana