Javascript 满足条件时使“选择”不可勾选

在以下示例中，当您选择选项

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>

你想要一个冰淇淋蛋卷吗？
对
不，谢谢


你要加香草冰淇淋吗？
对
不，谢谢


你想加巧克力冰淇淋吗？
对
不，谢谢


是否要在顶部添加喷水装置？
对
不，谢谢

函数observeFlavor（味道，需要）{
document.getElementById（flavor）.onchange=function（）{
if（document.getElementById（flavor）.options[1]。selected==true）{
document.getElementById（必需）.options[1]。selected=true
}
}
}
observeFlavor（“巧克力”、“冰淇淋筒”）；
observeFlavor（“香草”、“冰淇淋筒”）；

结合上述脚本，是否有人知道当选择了

id=“vanilla yes”

、

id=“chocolate yes”

，或者两者都被选中时，如何使

不可点击，但当两者都被取消选中时，

将再次被点击

---

注意：不使用disabled属性。

您可以利用

相信这可以做到：

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

函数observeFlavor（味道，需要）{
document.getElementById（flavor）.onchange=function（）{
if（document.getElementById（flavor）.options[1]。selected==true）{
document.getElementById（必需）.options[1]。selected=true；
document.getElementById（必需）.disabled=true；
}
否则{
document.getElementById（必需）.disabled=false；
}
}
}
document.getElementById（“您的提交按钮”）.onclick=function（）{
document.getElementById（“icecreamcone”）.disabled=false；
}
observeFlavor（“巧克力”、“冰淇淋筒”）；
observeFlavor（“香草”、“冰淇淋筒”）；

这是可行的，但只有一个问题：表单字段结果不会发送到服务器。是否有一种方法可以在不禁用字段的情况下使其不可访问？然后在提交之前，将元素设置为disabled=false；document.getElementById（“您的提交按钮”）.onclick=function（）{document.getElementById（“icecreamcone”）.disabled=false；}

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