選択項目で入力フィールドを無効にする

Question

ここで間違っていたことを表示できますか？

選択が2番目のオプション（Treibstoffverbrauch in Liter）を使用する場合、入力フィールドを無効にしたいとします。

$(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()を使用しているとき、それはoption要素のvalue属性を返します。したがって、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"> 
 
       \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

をご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()">

Answer 3

あなたのコードは罰金だ、あなたは、チェックボックスの値のために（others）をチェックする必要はありません使用するラベル（Kalkulation per Treibstoffverbrauch in Liter）。

属性disabledの適用方法を変更しました。trueとfalseの間で切り替えて、属性を適用/適用解除できます。あなたはオプションのval（）の値を提供する場合

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

変更 "リットルでTreibstoffverbrauchあたりKalkulationは" "他の人が" は