0

您将在下面找到示例代码和演示。我将尝试解释它的作用：

当您选择id="vanilla-yes"或id="chocolate-yes"时，id="icecreamcone"将被选中并禁用。

当您取消选择两者时，它会从 中删除 disabled 属性id="icecreamcone"。

问题：
当仅取消选择两者之一时，它也会删除 disabled 属性。

注意：选择或选择
id="icecreamcone"时，应始终禁用。id="vanilla-yes"id="chocolate-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>
  <li>
    <input type="submit" id="submit-icecream" value="Submit Ice Cream" />
  </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;
        document.getElementById(requires).disabled = true;
      }
      else{           
        document.getElementById(requires).disabled = false;
      }
    }
}

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

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

1 回答 1

1

添加一个计数器来跟踪当前阻止 disabled 的所有值#icecreamcone。如果您切换一个阻止#icecreamcone检查它是否被阻止的值：

  1. 如果该值被阻塞，则减少计数器
  2. 如果该值是非阻塞的，则增加计数器

如果计数器达到零，则取消阻止该元素 - 否则阻止它。

执行

var counter = {};
var previous = {};

function lock(id) {
    document.getElementById(id).options[1].selected = true;
    document.getElementById(id).disabled = true;
}

function unlock(id) {
    document.getElementById(id).disabled = false;
}

function observeFlavor(flavor, requires) {
    if (!counter[requires]) counter[requires] = 0;
    previous[flavor] = false;
    document.getElementById(flavor).onchange = function() {
        if (document.getElementById(flavor).options[1].selected == true && !previous[flavor]) {
            counter[requires]++;
            lock(requires);
            previous[flavor] = true;
        }
        else if (/* document.getElementById(flavor).options[2].selected == true &&*/
            previous[flavor]
        ) {
            previous[flavor] = false;

            if (--counter[requires] == 0) unlock(requires);
        }
    }
}

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

observeFlavor("chocolate", "icecreamcone");
observeFlavor("vanilla", "icecreamcone");

JSFiddle

于 2012-11-16T12:36:04.450 回答