Wie kann ich eine deaktivieren in einem basierend auf seinem Wert in JavaScript?

Question 1

Ich habe ein <select> mit einer Reihe von <option>S. Jeder hat einen einzigartigen Wert. Ich muss ein deaktivieren <option> mit einem bestimmten definierten Wert (nicht innerhtml).

Hat jemand eine Idee wie?

Question 2

Reines Javascript

Mit reinem Javascript müssten Sie jede Option durchlaufen und den Wert einzeln überprüfen.

// 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 ;
}

Ohne Aktivierung von nicht zielgerichteten Elementen:

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

Mit jQuery können Sie dies mit einer einzigen Zeile tun:

$("option[value="stackoverflow"]")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

Ohne Aktivierung von nicht zielgerichteten Elementen:

$("option[value="stackoverflow"]").attr("disabled", "disabled");

Beachten Sie, dass dies ist nicht Groß-/Kleinschreibung egal. “StackOverflow” ist nicht gleich “Stackoverflow”. Um eine Übereinstimmung ohne Berücksichtigung der Groß- und Kleinschreibung zu erhalten, müssten Sie alle durchlaufen, den Wert in Kleinbuchstaben umwandeln und dann damit vergleichen:

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

Ohne Aktivierung von nicht zielgerichteten Elementen:

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled");
  }
});

Question 3

Legen Sie eine ID für die Option fest, verwenden Sie dann Element nach ID abrufen und deaktivieren Sie sie, wenn der x-Wert ausgewählt wurde.

Beispiel

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

Question 4

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

Hier mit JQ .. falls jemand danach sucht

Question 5

Aus irgendeinem Grund sind andere Antworten unnötig komplex, es ist einfach, es in einer Zeile in reinem JavaScript zu tun:

Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;

oder

selectElement.querySelector('option[value="'+optionValue.replace(/["\]/g, '\$&')+'"]').disabled = true;

Die Leistung hängt von der Anzahl der Optionen ab (je mehr Optionen, desto langsamer die erste) und ob Sie das Escaping weglassen können (die replace Anruf) vom zweiten. Auch das erste verwendet Array.find und Pfeilfunktionen, die in IE11 nicht verfügbar sind.

Question 6

Verwenden Sie einen einfachen Selektor:

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

Question 7

Ich möchte Sie auch auf die Idee bringen, eine zu deaktivieren <option> mit einem gegebenen definierten Wert (not innerhtml). Ich empfehle es mit jQuery den einfachsten Weg zu bekommen. Siehe mein Beispiel unten.

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

Die Idee hier ist, wie man deaktiviert Printed Option, wenn aktuell Status ist 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;

Sie können sehen, wie es hier funktioniert:

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

Question 8

Sie können diese Funktion auch verwenden,

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";
    }
}