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

Question

I have a <select> with a number of <option>s. Each has a unique value. I need to disable an <option> with a given defined value (not innerHTML).

Anyone have an idea how?

I think the best solution for this is given in another question: stackoverflow.com/questions/31860103/… — Arul Vyas Mohan
– Arul Vyas Mohan, Commented Feb 1, 2018 at 11:38

Sampson · Accepted Answer · 2022-02-22 06:29:31Z

133

JavaScript, in 2022

You can use querySelectorAll, and forEach off of the resulting NodeList to do this same thing more easily in 2022.

document.querySelectorAll("#foo option").forEach(opt => {
    if (opt.value == "StackOverflow") {
        opt.disabled = true;
    }
});

Do be mindful of string-comparisons, however. 'StackOverflow' and 'stackoverflow' are not the same string. As such, you can call .toLowerCase() on strings before comparing, or even go with a case-insensitive regular expression comparison like the this:

if ( /^stackoverflow$/i.test(option.value) ) {
  option.disabled = true;
}

Pure Javascript (2010)

With pure Javascript, you'd have to cycle through each option, and check the value of it individually.

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < 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 <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < 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");
  }
});

edited Feb 22, 2022 at 6:29

answered Jan 28, 2010 at 16:08

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kyle Butt Over a year ago

No, with the value, you would use $("option[value=someval]"). He's looking for the value, not the text inside.

Sampson Over a year ago

Ah, good point, @KyleButt. I've updated my solution. Thank you for pointing that out.

Gumbo Over a year ago

Disabling the options with “stackoverflow” doesn’t imply to enable those without “stackoverflow”.

Sampson Over a year ago

@Gumbo: Correct. I was trying anticipate future problems, but I can see how my solution would cause more problems, such as if the user had other options disabled by default. I've updated my solution. Thanks for pointing out my error.

Samuel Kirschner Over a year ago

op[i].disabled = (op[i].value.toLowerCase() == "stackoverflow") ;) +1

|

Youssouf Oumar · Accepted Answer · 2022-07-03 20:02:10Z

5

Set an id to the option then use getElementById and disable it when x value has been selected, like so:

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

edited Jul 3, 2022 at 20:02

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

answered Mar 23, 2015 at 18:16

Patricio Zambrano

511 silver badge3 bronze badges

Comments

Rick Mohr · Accepted Answer · 2022-01-21 09:16:33Z

4

Use a straightforward selector:

document.querySelector('select[name="theName"] option[value="theValue"]').disabled = true;

answered Jan 21, 2022 at 9:16

Rick Mohr

2,0451 gold badge21 silver badges26 bronze badges

Comments

Youssouf Oumar · Accepted Answer · 2022-07-03 19:59:50Z

3

Here with JQuery, if anybody search it:

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');
       }
  });   
}

edited Jul 3, 2022 at 19:59

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

answered Jan 27, 2016 at 14:13

Айдън Бейтулов

751 silver badge9 bronze badges

Comments

user · Accepted Answer · 2019-04-28 20:21:21Z

2

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 => o.value === optionValue).disabled = true;

or

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').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.

answered Apr 28, 2019 at 20:21

user

26.2k13 gold badges119 silver badges104 bronze badges

Comments

eQ19 · Accepted Answer · 2018-05-14 05:19:20Z

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/

cHao · Accepted Answer · 2013-04-18 06:37:51Z

-4

You can also use this function,

function optionDisable(selectId, optionIndices)
{
    for (var idxCount=0; idxCount<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';
    }
}

edited Apr 18, 2013 at 6:37

cHao

87.1k21 gold badges147 silver badges178 bronze badges

answered Jan 30, 2013 at 6:49

Abhijeet

8,7715 gold badges73 silver badges82 bronze badges

1 Comment

cHao Over a year ago

I formatted the code, but the other hideosities of this function are on you to fix. :P

Collectives™ on Stack Overflow

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

7 Answers 7

JavaScript, in 2022

Pure Javascript (2010)

7 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

JavaScript, in 2022

Pure Javascript (2010)

7 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related