Question

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

当您选择id="vanilla-yes"或id="chocolate-yes"时，系统会选择并停用id="icecreamcone"。

取消选择两者后，它会从id="icecreamcone"删除已禁用的属性。

问题：
当取消选择其中一个时，它也会删除禁用的属性。

注意：
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>

Answer 1

添加一个计数器，用于跟踪当前阻止已禁用#icecreamcone的所有值。如果您切换阻止#icecreamcone检查是否阻止的值：

如果值阻止，则减少计数器
如果值为非阻塞，则增加计数器

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

实施

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

选择其他选项并禁用选择

1 个答案:

实施