JS option in select disabled on value?

How can I use JS to disable option on value not option index.

<select id="myselect">
 <option value="20">20</option>
 <option value="30">30</option>
</select>

document.getElementById('myselect').options[0].disabled = true;
document.getElementById('myselect').options[1].disabled = false;

11 thoughts on “JS option in select disabled on value?”

  1. First, you get all of the option tag and saving them to the allOptions

    Then, loop through each of them and check whether their value match certain criteria.

    const allOptions = document.querySelectorAll('#myselect option')
    
    allOptions.forEach(elem => {
      elem.disable = elem.value > 30 ? true : false; 
    }
    
    
    Reply
  2. You can use the below example

    var perfType = document.getElementById("driveCapacity").value;
    if (perfType == "7200") {
      document.getElementById("4000").disabled = false;
    } else {
      document.getElementById("4000").disabled = true;
    } //driveRPM
    <body>
      <select class="pull-right text-muted small" name="driveCapacity" id="driveCapacity">
        <option value="4000.0" id="4000">4TB</option>
        <option value="900.0" id="900">900GB</option>
        <option value="300.0" id="300">300GB</option>
      </select>
    </body>
    Reply

Leave a Comment