Disable elements with an option using js

Question

Thanks for all answers, help. Unfortunately i have a new problem. I edited the script a little bit. Now i added 2 new values (named:64) to 2 new options. With these options, i want to disable the options classed -> "test". The code actually works, but now, when i added this new code, the previous code is not working. I think the problem is that i added 2 classes to 1 option, but i am not sure, and i dont know any other way to fix it. I know my troubles are really ridiculous, but i am new in js.

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

This might be helpful: http://stackoverflow.com/questions/20381003/jquery-and-css-hide-show-select-options-with-a-certain-css-class — Echoes, Apr 24 '17 at 16:00

score 0 · Answer 1 · answered Apr 24 '17 at 16:01

Try this:

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

Don't you have any question Fabian? – Majid Parvin Apr 24 '17 at 16:11 — Majid Parvin, Apr 24 '17 at 16:11

score 0 · Accepted Answer · answered Apr 24 '17 at 16:08

When you select element by class, you have to response an array.

To disable all elements, you should disable for all in the array like this :

replace :

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

to :

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

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

Disable elements with an option using js

2 Answers2