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

I would like to give you also the idea to disable an <option> with a given defined value (not innerhtml). I recommend to it with jQuery to get the simplest way. See my sample below.

HTML

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

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

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

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

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

Set an id to the option then use get element by id and disable it when x value has been selected    example    lt body gt         lt select class  pull-right text-muted small                    name  driveCapacity  id driveCapacity onchange  checkRPM    gt         lt option value  4000 0  id  4000  gt 4TB lt  option gt         lt option value  900 0  id  900  gt 900GB lt  option gt         lt option value  300 0  id   300  gt 300GB lt  option gt       lt  select gt       lt  body gt   lt script gt  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                         lt  script gt

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

[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