Databases
StackOverflow2013
Postsdbo
POMake select unclickable when criteria is met
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake select unclickable when criteria is met
    text
    copied!<p>In the following example, when you select the option <code>id="chocolate-yes"</code> and/or <code>id="vanilla-yes"</code>, the option <code>id="icecreamcone-yes"</code> will also be selected: <br/><br/></p> <pre><code>&lt;ul id="icecream" style="list-style:none;line-height:30px;"&gt; &lt;li&gt; &lt;select id="icecreamcone"&gt; &lt;option value="addicecreamcone"&gt;Would you like an ice cream cone?&lt;/option&gt; &lt;option id="icecreamcone-yes" value="yes"&gt;Yes&lt;/option&gt; &lt;option id="icecreamcone-no" value="no"&gt;No thanks&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select id="vanilla"&gt; &lt;option value="addvanilla"&gt;Would you like to add vanilla ice cream?&lt;/option&gt; &lt;option id="vanilla-yes" value="yes"&gt;Yes&lt;/option&gt; &lt;option id="vanilla-no" value="no"&gt;No thanks&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select id="chocolate"&gt; &lt;option value="addchocolate"&gt;Would you like to add chocolate ice cream?&lt;/option&gt; &lt;option id="chocolate-yes" value="yes"&gt;Yes&lt;/option&gt; &lt;option id="chocolate-no" value="no"&gt;No thanks&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;select id="sprinkles"&gt; &lt;option value="addsprinkles"&gt;Would you like to add sprinkles on top?&lt;/option&gt; &lt;option id="sprinkles-yes" value="yes"&gt;Yes&lt;/option&gt; &lt;option id="sprinkles-no" value="no"&gt;No thanks&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><br/></p> <pre><code>&lt;script type="text/javascript"&gt; function observeFlavor(flavor, requires) { document.getElementById(flavor).onchange = function(){ if(document.getElementById(flavor).options[1].selected == true) { document.getElementById(requires).options[1].selected = true } } } observeFlavor("chocolate","icecreamcone"); observeFlavor("vanilla","icecreamcone"); &lt;/script&gt; </code></pre> <p><br/></p> <p>Incorporating the above script, does anyone know how to make <code>&lt;select id="icecreamcone"&gt;</code> unclickable when <code>id="vanilla-yes"</code>, <code>id="chocolate-yes"</code>, or both are selected, but when they are both deselected, <code>&lt;select id="icecreamcone"&gt;</code> will be clickable again?</p> <p><br/> <strong>Note: without using the disabled attribute.</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload