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

Lesezeit: 5 Minuten

Wie kann ich eine deaktivieren in einem basierend auf seinem
David

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?

  • Ich denke, die beste Lösung dafür wird in einer anderen Frage gegeben: stackoverflow.com/questions/31860103/…

    – Arul Vyas Mohan

    1. Februar 18 um 11:38 Uhr

Wie kann ich eine deaktivieren in einem basierend auf seinem
Samson

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

  • Nein, mit dem Wert würden Sie $(“option[value=someval]”). Er sucht nach dem Wert, nicht nach dem darin enthaltenen Text.

    – Kyle Butt

    28. Januar 10 um 16:22 Uhr

  • Ah, guter Punkt, @KyleButt. Ich habe meine Lösung aktualisiert. Vielen Dank für den Hinweis.

    – Samson

    28. Januar 10 um 16:25 Uhr

  • Das Deaktivieren der Optionen mit „stackoverflow“ bedeutet nicht, dass diejenigen ohne „stackoverflow“ aktiviert werden.

    – Gumbo

    28. Januar 10 um 16:34 Uhr

  • @ Gumbo: Richtig. Ich habe versucht, zukünftige Probleme zu antizipieren, aber ich kann sehen, wie meine Lösung mehr Probleme verursachen würde, z. B. wenn der Benutzer dies getan hätte andere Optionen standardmäßig deaktiviert. Ich habe meine Lösung aktualisiert. Danke für den Hinweis auf meinen Fehler.

    – Samson

    28. Januar 10 um 16:39 Uhr


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

    – Samuel Kirschner

    13. Juni 17 um 16:35 Uhr

1644070386 149 Wie kann ich eine deaktivieren in einem basierend auf seinem
Patricio Zambrano

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>

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

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.

Verwenden Sie einen einfachen Selektor:

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

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/

1644070387 601 Wie kann ich eine deaktivieren in einem basierend auf seinem
chao

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

  • Ich habe den Code formatiert, aber die anderen Abscheulichkeiten dieser Funktion müssen Sie beheben. 😛

    – chao

    18. April 13 um 6:39 Uhr

.

784070cookie-checkWie kann ich eine deaktivieren in einem basierend auf seinem Wert in JavaScript?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy