Eingabefeld mit Auswahl deaktivieren

Question

Können Sie mir zeigen, was ich hier falsch gemacht habe?

Ich möchte das Eingabefeld deaktivieren, wenn die Auswahl die zweite Option (Treibstoffverbrauch in Liter) verwendet.

$(document).ready(function() { 
 
    $('select[name="Kalkulationsart"]').on('change', function() { 
 
    var eins = $(this).val(); 
 
    if (eins == "Kalkulation per Treibstoffverbrauch in Liter") { 
 
     $('#VerbrauchinL').attr('disabled', 'disabled'); 
 
    } else { 
 
     $('#VerbrauchinL').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="KATitle">Kalkulationsart</p> 
 
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text"> 
 
    <option value="0">Kalkulation per Verbrauch/100km</option> 
 
    <option value="others">Kalkulation per Treibstoffverbrauch in Liter</option> 
 
</select> 
 
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p> 
 
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">

Answer 1

Wenn Sie $(this).val() verwenden es gibt die value Attribut des option Element. Also müssten Sie es mit 0 oder others vergleichen.

Siehe Schnipsel unten:

$(document).ready(function() { 
 
    $('select[name="Kalkulationsart"]').on('change', function() { 
 
    var eins = $(this).val(); 
 
    console.log(eins); 
 
    if (eins == "others") { 
 
     $('#VerbrauchinL').attr('disabled', 'disabled'); 
 
    } else { 
 
     $('#VerbrauchinL').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="KATitle">Kalkulationsart</p> 
 
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text"> 
 
       \t \t \t \t \t <option value="0">Kalkulation per Verbrauch/100km</option> 
 
       \t \t \t \t \t <option value="others">Kalkulation per Treibstoffverbrauch in Liter</option> 
 

 
       \t \t \t \t </select> 
 

 
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p> 
 
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">

Answer 2

Ihr select Wert unterscheidet (others) als das, was gegen dich zu vergleichen.

$(document).ready(function() { 
 
    $('#Kalkulationsart').on('change', function() { 
 
    $('#VerbrauchinL').prop('disabled', $(this).val() == "others"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="KATitle">Kalkulationsart</p> 
 
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text"> 
 
    <option value="0">Kalkulation per Verbrauch/100km</option> 
 
    <option value="others">Kalkulation per Treibstoffverbrauch in Liter</option> 
 
</select> 
 

 
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p> 
 
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">

Answer 3

Ihr Code scheint in Ordnung, müssen Sie für den Wert in der Checkbox (others) nicht das Etikett verwendet (Kalkulation per Treibstoffverbrauch in Liter) überprüfen.

Ich habe die Art und Weise geändert, wie das Attribut disabled angewendet wird, können wir zwischen true und false wechseln, um das Attribut anzuwenden/nicht anzuwenden.

$(document).ready(function() { 
 
    $('select[name="Kalkulationsart"]').on('change', function() { 
 
    var eins = $(this).val(); 
 
    if (eins === "others") { 
 
     $('#VerbrauchinL').attr('disabled', true); 
 
    } else { 
 
     $('#VerbrauchinL').attr('disabled', false); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="KATitle">Kalkulationsart</p> 
 
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text"> 
 
    <option value="0">Kalkulation per Verbrauch/100km</option> 
 
    <option value="others">Kalkulation per Treibstoffverbrauch in Liter</option> 
 
</select> 
 
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p> 
 
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">

Answer 4

change "Kalkulation pro Treibstoffverbrauch in Liter" auf "andere" wenn Sie einen Wert in der Option val() liefern ergibt den Wert