0

サンプル コードとデモを以下に示します。私はそれが何をするかを説明しようとします：

id="vanilla-yes"またはを選択するとid="chocolate-yes"、id="icecreamcone"が選択され、無効になります。

両方の選択を解除すると、無効なプロパティが から削除されid="icecreamcone"ます。

問題:
2 つのうちの 1 つだけを選択解除すると、無効なプロパティも削除されます。

注:またはが選択されている
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 に答える