How can I disable an option in a select based on its value in JavaScript

Question

I have a  lt select gt  with a number of  lt option gt s  Each has a unique value  I need to disable an  lt option gt  with a given defined value  not innerhtml    Anyone have an idea how

User · Answer

Set an id to the option then use get element by id and disable it when x value has been selected..

example

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <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>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    }else{          
        document.getElementById("4000").disabled = true;            
    }    
</script>

User · Answer

Pure Javascript  With pure Javascript  you d have to cycle through each option  and check the value of it individually      Get all options within  lt select id  foo  gt     lt  select gt  var op   document getElementById  foo   getElementsByTagName  option    for  var i   0  i  lt  op length  i           lowercase comparison for case-insensitivity    op i  value toLowerCase       stackoverflow          op i  disabled   true        op i  disabled   false       Without enabling non-targeted elements      Get all options within  lt select id  foo  gt     lt  select gt  var op   document getElementById  foo   getElementsByTagName  option    for  var i   0  i  lt  op length  i           lowercase comparison for case-insensitivity   if  op i  value toLowerCase       stackoverflow         op i  disabled   true          jQuery  With jQuery you can do this with a single line      option value  stackoverflow        attr  disabled    disabled      siblings   removeAttr  disabled      Without enabling non-targeted elements      option value  stackoverflow     attr  disabled    disabled        Note that this is not case insensitive   StackOverflow  will not equal  stackoverflow   To get a case-insensitive match  you d have to cycle through each  converting the value to a lower case  and then check against that      option   each function      if    this  val   toLowerCase       stackoverflow           this  attr  disabled    disabled   siblings   removeAttr  disabled              Without enabling non-targeted elements      option   each function      if    this  val   toLowerCase       stackoverflow           this  attr  disabled    disabled

User · Answer

var vals   new Array  2  3  5  8    select disable options  add reklamaciq reason  vals   select disable options  add reklamaciq reason     function select disable options selectid vals     var selected   false           selectid   option   removeAttr  selected            selectid   option   each function i elem          var elid   parseInt   elem  attr  value            if vals              if vals indexOf elid     -1                    elem  removeAttr  disabled                   if selected    false                        elem  attr  selected   selected                       selected   true                                 else                   elem  attr  disabled   disabled                          else                elem  removeAttr  disabled                          Here with JQ    if anybody search it

User · Answer

I would like to give you also the idea to disable an  lt option gt  with a given defined value  not innerhtml   I recommend to it with jQuery to get the simplest way  See my sample below   HTML    Status     lt div id  option  gt      lt select class  status  gt         lt option value  hand  selected gt Hand lt  option gt         lt option value  simple  gt Typed lt  option gt         lt option value  printed  gt Printed lt  option gt      lt  select gt   lt  div gt    Javascript    The idea here is how to disable Printed option when current Status is Hand  var status       option   find   status     to get current the selected value var op   status find  option     to get the elements for disable attribute  status val       hand    op 2  disabled   true  op 2  disabled   false    You may see how it works here     https   jsfiddle net chetabahana f7ejxhnk 28

User · Answer

For some reason other answers are unnecessarily complex  it s easy to do it in one line in pure JavaScript   Array prototype find call selectElement options  o   gt  o value     optionValue  disabled   true    or  selectElement querySelector  option value    optionValue replace        g       amp          disabled   true    The performance depends on the number of the options  the more the options  the slower the first one  and whether you can omit the escaping  the replace call  from the second one  Also the first one uses Array find and arrow functions that are not available in IE11

User · Answer

You can also use this function   function optionDisable selectId  optionIndices        for  var idxCount 0  idxCount lt optionIndices length idxCount                  document getElementById selectId  children optionIndices idxCount   disabled  disabled           document getElementById selectId  children optionIndices idxCount   style backgroundColor     ccc           document getElementById selectId  children optionIndices idxCount   style color     f00

[javascript] How can I disable an <option> in a <select> based on its value in JavaScript?

Examples related to javascript

Examples related to html

Examples related to select