製作選擇不可點擊，當條件滿足

Question

在下面的例子中，當您選擇選項id="chocolate-yes"和/或id="vanilla-yes"，id="icecreamcone-yes"也將所選擇的選項：

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

<script type="text/javascript"> 
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"); 
</script> 

In包含上面的腳本，沒有人知道如何在id="vanilla-yes",id="chocolate-yes"或兩者都選中時使<select id="icecreamcone">不可點擊，但是當它們都被取消選擇時，<select id="icecreamcone">將再次可點擊？

注意：不使用禁用屬性。

Answer 1

相信這應該這樣做：

<script type="text/javascript"> 
function observeFlavor(flavor, requires) { 
    document.getElementById(flavor).onchange = function(){ 
     if(document.getElementById(flavor).options[1].selected == true) { 
     document.getElementById(requires).options[1].selected = true; 
     document.getElementById(requires).disabled = true; 
     } 
     else{   
     document.getElementById(requires).disabled = false; 
     } 
    } 
} 

document.getElementById("your-submit-button").onclick = function() {  
    document.getElementById("icecreamcone").disabled = false; 
} 

observeFlavor("chocolate","icecreamcone"); 
observeFlavor("vanilla","icecreamcone"); 
</script> 

Answer 2

你可以利用Select Disabled attribute