Question

感谢所有答案，帮助。不幸的是我有一个新问题。我编辑了一下脚本。现在我将2个新值（名为：64）添加到2个新选项中。有了这些选项，我想禁用分类选项 - ＆gt; ＆＃34;测试＆＃34 ;.代码实际上有效，但是现在，当我添加这个新代码时，之前的代码无效。我认为问题是我在1个选项中添加了2个类，但我不确定，我也不知道有任何其他方法可以修复它。我知道我的麻烦真的很荒谬，但我是js的新人。

＆＃13;

<div class="config">

<select onchange="yesnoCheck(this);">
	<option>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) {	
		if (that.value == "1151") {
        
		    var option = document.querySelectorAll('option.intel'),
			i = 0,
			len = option.length;
			for (; i < len; i++) {
			option[i].disabled = true;
			}	
			
			var option2 = document.querySelectorAll('option.amd'),
			i = 0,
			len = option2.length;
			for (; i < len; i++) {
			option2[i].disabled = false;
			}
		}
		
		else if (that.value == "AM3") {
        
		    var option = document.querySelectorAll('option.amd'),
			i = 0,
			len = option.length;
			for (; i < len; i++) {
			option[i].disabled = true;
			}	
			
			var option2 = document.querySelectorAll('option.intel'),
			i = 0,
			len = option2.length;
			for (; i < len; i++) {
			option2[i].disabled = false;
			}
		}
	}	
</script>

</div>


<div class="config">

<select onchange="yesnoCheck(this);">
	  <option>Not selected</option>
    <option>Kingston HyperX FURY 8GB</option>	
    <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) {	
		if (that.value == "64") {
        
		  var option = document.querySelectorAll('option.test'),
			i = 0,
			len = option.length;
			for (; i < len; i++) {
			option[i].disabled = true;
			}	
		}
	}	
</script>

</div>




<div class="config">

<select onchange="yesnoCheck(this);">
	  <option>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="test" class="amd">MSI 970A SLI Krait Edition</option>
    <option class="test" class="amd">ASUS CROSSHAIR V FORMULA-Z</option>
</select>

</div>

＆＃13;

Answer 1

试试这个：

<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>

Answer 2

当您逐个选择元素时，您必须响应一个数组。

要禁用所有元素，您应该禁用数组中的所有元素，如下所示：

替换：

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

到：

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

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

使用js禁用带有选项的元素

2 个答案: