Comment désactiver / activer le champ de sélection en utilisant 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ée lorsque cette case n’est pas cochée.

Je viens avec ce code:

 
(choose one) Margaritha Hawai pizza.
var update_pizza = function () { if ($("#pizza").is(":checked")) { $("#pizza_kind").removeAttr("disabled"); } else { $("#pizza_kind").prop('disabled', 'disabled'); } }; $(update_pizza); $("#pizza").change(update_pizza);

J’ai essayé différentes méthodes pour définir des atsortingbuts désactivés à l’aide de .prop() , .attr() et .disabled= . Cependant, rien ne se passe. Lors de l’application à un au lieu de , le code fonctionne parfaitement.

Comment désactiver / activer utilisant jQuery?

Vous souhaitez utiliser un code comme celui-ci:

 
pizza.

Voici l’ exemple de travail

Pour pouvoir activer / désactiver les sélections, vos sélections doivent tout d’abord avoir un ID ou une classe. Ensuite, vous pourriez faire quelque chose comme ceci:

Désactiver:

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

Activer:

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

Désactivé est un atsortingbut 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 ferait ce HTML

  

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

Pourtant, il peut aussi être fait en l’utilisant comme propriété

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

se faire

  

Qui ne fonctionne que pour HTML et non XTML

Remarque: un élément désactivé ne sera pas soumis avec le formulaire comme répondu dans cette question: l’ élément de formulaire désactivé n’est pas soumis

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

NOTE 3:

Un contrôle de formulaire désactivé doit empêcher tous les événements de clic mis en queue sur la source de tâche d’interaction utilisateur d’être dissortingbués sur l’élément.

TL; DR

  

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" à la , comme : jsfiddle link

La raison pour laquelle votre code n’a pas fonctionné est simplement que $("#pizza_kind") ne sélectionne pas l’élément car il n’a pas id="pizza_kind" .

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

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

désolé de répondre dans l’ancien fil mais mon code peut aider d’autres dans l’avenir. J’étais dans le même scénario que lorsque la case à cocher sera cochée, alors quelques champs d’entrée sélectionnés seront activés autrement sage désactivé.

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

Bonne question – Je pense que la seule façon d’y parvenir est de filtrer les éléments dans 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 basées sur la radio sélectionnée (Besoin d’aide pour tous les navigateurs)