使用js禁用具有選項的元素

Question

感謝您的所有答案，幫助。不幸的是我有一個新問題。我編輯了一下腳本。現在我添加了2個新值（命名爲：64）給2個新選項。有了這些選項，我想禁用選項分類 - >「測試」。代碼實際上工作，但現在，當我添加這個新的代碼，以前的代碼不起作用。我認爲問題是我添加了2個類到1個選項，但我不確定，我不知道任何其他方式來解決它。我知道我的麻煩真的很荒謬，但我是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>