Menu
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?
918
The disabled attribute for <select> element in HTML is used to specify that the select element is disabled. A disabled drop-down list is un-clickable and unusable. It is a boolean attribute.
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> 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; } 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"); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
