Отключить поле ввода с выбором

Question

Можете ли вы показать мне, что я сделал не так здесь?

Я хотел бы отключить поле ввода, когда выбор использует второй вариант (Treibstoffverbrauch в литра).

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

Когда вы используете $(this).val() это возвращает value атрибут option элемент. Итак, вам нужно сравнить его с 0 или же others,

Смотрите фрагмент ниже:

$(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">
                     <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 2

Замените "Kalkulation per Treibstoffverbrauch in Liter" на "others", если вы задаете значение в опции. val() дает значение

Answer 3

Ваш код выглядит нормально, вам нужно проверить значение в поле (others) не использованный ярлык (Kalkulation per Treibstoffverbrauch in Liter).

Я изменил способ атрибута disabled применяется, мы можем переключаться между true а также false, чтобы применить / отменить атрибут.

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

Ваш select значение другое (others) чем ты сравниваешь.

$(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()">