La sélection d'une option forcera la sélection d'une autre option

Question

Par exemple, si vous sélectionnez l'option avec id="chocolate-yes" ou id="vanilla-yes", l'option avec id="icecreamcone-yes" sera également sélectionnée. Comme vous pouvez le voir sur l'image ci-dessous, lorsque vous sélectionnez l'option id="chocolate-yes", <select id="icecreamcone"> sera désactivé.

Lorsque les deux id="chocolate-yes" et id="vanilla-yes" ne sont pas sélectionnés l'option avec id="icecreamcone-no" ne sera pas désactivée.

Pour le mettre en mots plus simples: vous devez toujours avoir un cornet de crème glacée si vous voulez ajouter la vanille ou de crème glacée au chocolat, à l'exception de vermicelles :)

Toute personne connaître un Javascript qui peut le faire?

Note 1: l'option avec id="sprinkles-yes" n'affectera id="icecreamcone-yes".
Remarque 2: id="icecreamcone-yes" doit toujours être sélectionnable avant de sélectionner id="vanilla-yes" ou id="chocolate-yes".
Note 3: les noms d'id ne peuvent pas être changés, et vous ne pouvez pas ajouter plus de propriétés aux éléments.
Remarque 4: impossible d'utiliser jQuery.

<ul id="icecream" style="list-style:none;line-height:30px;"> 
    <li> 
    <select id="icecreamcone"> 
     <option value="addicecreamcone">Would you like an ice cream cone?</option> 
     <option id="icecreamcone-yes" value="yes">Yes</option> 
     <option id="icecreamcone-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="vanilla"> 
     <option value="addvanilla">Would you like to add vanilla ice cream?</option> 
     <option id="vanilla-yes" value="yes">Yes</option> 
     <option id="vanilla-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="chocolate"> 
     <option value="addchocolate">Would you like to add chocolate ice cream?</option> 
     <option id="chocolate-yes" value="yes">Yes</option> 
     <option id="chocolate-no" value="no">No thanks</option> 
    </select> 
    </li> 
    <li> 
    <select id="sprinkles"> 
     <option value="addsprinkles">Would you like to add sprinkles on top?</option> 
     <option id="sprinkles-yes" value="yes">Yes</option> 
     <option id="sprinkles-no" value="no">No thanks</option> 
    </select> 
    </li> 
</ul> 

Answer 1

En utilisant JQuery

$('#icecreamcone').change(function() { 
alert("There has been a change"); 
//Use Javascript to disable. 
}); 

Remplacer #icecreamcone avec la sélection ID de l'élément que vous cherchez à suivre l'événement de changement sur. Le seul inconvénient est que les éléments de formulaire désactivés ne sont pas soumis, donc stockez la valeur dans une balise d'entrée cachée pour les soumettre.

Answer 2

Ok, quelque chose comme ça pourrait vous aider:

​$("select")​.change(function() { 
    if ($("#vanilla").val() == "yes" || $("#chocolate").val() == "yes") 
     $("#icecreamcone").val("yes"); 
    else 
     $("#icecreamcone").val("addicecreamcone"); 
});​ 

Vous pouvez essayer here