jsを使用してオプションを使用して要素を無効にする

Question

すべての回答ありがとうございました。残念ながら私には新しい問題があります。スクリプトを少し編集しました。今私は2つの新しい値（名前：64）を2つの新しいオプションに追加しました。これらのオプションを使用して、私はオプションの "テスト"を無効にします。コードは実際に動作しますが、今、この新しいコードを追加すると、前のコードは機能しません。私は問題は、私は1つのオプションに2つのクラスを追加したと思うが、私は確信していない、と私はそれを修正するための他の方法を知っていない。私の悩みは本当にばかげているが、私はjsで新しいです。

<div class="config"> 
 

 
<select onchange="yesnoCheck(this);"> 
 
\t <option>Not selected</option> 
 
    <option value="1151">Intel® Pentium® Processor G4560 3.5 Ghz</option> 
 
\t <option value="1151">Intel® Core® i3-7300 4 Ghz</option> \t 
 
    <option value="1151">Intel® Core® i5-7500 3.4 Ghz</option> 
 
\t 
 
    <option value="AM3">AMD FX-Series FX-6300 3.5Ghz</option> 
 
    <option value="AM3">AMD FX-Series FX-8300 3.3Ghz</option> 
 
    <option value="AM3">AMD FX-Series FX-8320 3.5Ghz</option> 
 
</select> 
 

 
<script> 
 
    function yesnoCheck(that) { \t 
 
\t \t if (that.value == "1151") { 
 
     
 
\t \t  var option = document.querySelectorAll('option.intel'), 
 
\t \t \t i = 0, 
 
\t \t \t len = option.length; 
 
\t \t \t for (; i < len; i++) { 
 
\t \t \t option[i].disabled = true; 
 
\t \t \t } \t 
 
\t \t \t 
 
\t \t \t var option2 = document.querySelectorAll('option.amd'), 
 
\t \t \t i = 0, 
 
\t \t \t len = option2.length; 
 
\t \t \t for (; i < len; i++) { 
 
\t \t \t option2[i].disabled = false; 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t else if (that.value == "AM3") { 
 
     
 
\t \t  var option = document.querySelectorAll('option.amd'), 
 
\t \t \t i = 0, 
 
\t \t \t len = option.length; 
 
\t \t \t for (; i < len; i++) { 
 
\t \t \t option[i].disabled = true; 
 
\t \t \t } \t 
 
\t \t \t 
 
\t \t \t var option2 = document.querySelectorAll('option.intel'), 
 
\t \t \t i = 0, 
 
\t \t \t len = option2.length; 
 
\t \t \t for (; i < len; i++) { 
 
\t \t \t option2[i].disabled = false; 
 
\t \t \t } 
 
\t \t } 
 
\t } \t 
 
</script> 
 

 
</div> 
 

 

 
<div class="config"> 
 

 
<select onchange="yesnoCheck(this);"> 
 
\t <option>Not selected</option> 
 
    <option>Kingston HyperX FURY 8GB</option> \t 
 
    <option>Kingston HyperX FURY 16GB</option> 
 
    <option>Kingston HyperX FURY 32GB (2x16GB)</option> 
 
    <option value="64">Kingston HyperX FURY 64GB (4x16GB)</option> 
 
</select> 
 

 
<script> 
 
    function yesnoCheck(that) { \t 
 
\t \t if (that.value == "64") { 
 
     
 
\t \t var option = document.querySelectorAll('option.test'), 
 
\t \t \t i = 0, 
 
\t \t \t len = option.length; 
 
\t \t \t for (; i < len; i++) { 
 
\t \t \t option[i].disabled = true; 
 
\t \t \t } \t 
 
\t \t } 
 
\t } \t 
 
</script> 
 

 
</div> 
 

 

 

 

 
<div class="config"> 
 

 
<select onchange="yesnoCheck(this);"> 
 
\t <option>Not selected</option> 
 
    <option class="intel">ASRock B250M-HDV</option> 
 
\t <option class="intel">ASUS Z170-K</option> \t 
 
    <option class="intel">GIGABYTE GA-B250M-DS3H</option> 
 
\t 
 
    <option    class="amd">GIGABYTE GA-970A-UD3P</option> 
 
    <option    class="amd">GIGABYTE GA-990FXA-UD3 R5 </option> 
 
    <option class="test" class="amd">MSI 970A SLI Krait Edition</option> 
 
    <option class="test" class="amd">ASUS CROSSHAIR V FORMULA-Z</option> 
 
</select> 
 

 
</div>

Answer 1

を。置き換え

：

document.getElementsByClassName('amd').disabled = true; 

へ：

var items = document.getElementsByClassName('amd'); 

for(var i = 0; i < items.length; i++){ 
    items[i].disabled = true; 
} 

Answer 2

この試してみてください：あなたはクラスで要素を選択すると、あなたが応答に配列を持っている

<div class="config"> 
 

 
<select onchange="yesnoCheck(this);"> 
 
    <option value="">Not selected</option> 
 
    <option value="1151">Intel® Pentium® Processor G4560 3.5 Ghz</option> 
 
    <option value="1151">Intel® Core® i3-7300 4 Ghz</option> 
 
    <option value="1151">Intel® Core® i5-7500 3.4 Ghz</option> 
 

 
    <option value="AM3">AMD FX-Series FX-6300 3.5Ghz</option> 
 
    <option value="AM3">AMD FX-Series FX-8300 3.3Ghz</option> 
 
    <option value="AM3">AMD FX-Series FX-8320 3.5Ghz</option> 
 
</select> 
 

 
<script> 
 
    function yesnoCheck(that) { 
 
     var op = document.getElementById("foo").getElementsByTagName("option"); 
 
     for (var i = 0; i < op.length; i++) { 
 
      if (op[i].className == "amd" && that.value == "1151") { 
 
       op[i].disabled = true 
 
      } else { 
 
       op[i].disabled = false; 
 
      } 
 
     } 
 
    } 
 
</script> 
 

 
</div> 
 

 

 
<div class="config"> 
 

 
<select id="foo"> 
 
    <option class="">Not selected</option> 
 
    <option class="intel">ASRock B250M-HDV</option> 
 
    <option class="intel">ASUS Z170-K</option> 
 
    <option class="intel">GIGABYTE GA-B250M-DS3H</option> 
 

 
    <option class="amd">GIGABYTE GA-970A-UD3P</option> 
 
    <option class="amd">GIGABYTE GA-990FXA-UD3 R5 </option> 
 
    <option class="amd">MSI 970A SLI Krait Edition</option> 
 
    <option class="amd">ASUS CROSSHAIR V FORMULA-Z</option> 
 
</select> 
 

 
</div>