如果輸入值符合要求，則添加 html 屬性

Question

假設我有兩個輸入。 當我在 input1 中鍵入值（例如 0.4）並滿足要求時， input2 將刪除只讀屬性。 同時，如果我在 input1 中輸入的值為 0.3，那么 input2 屬性將再次變為只讀。

它不起作用。 也許我在這里錯過了什么

 $(".input1").keydown(function() { var dInput = $(this).val(); if (dInput >= 0.4 && dInput <= 0.6) { $(".input2").attr('readonly', true); } else { $(".input2").removeAttr("readonly"); } }); function isNumberKey(e) { // stub return true; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" /> <input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />

Answer 1

1：使用keyup function，因為值稍后會填充到字段中，並且您嘗試在keydown捕獲

2：我已根據您的描述切換了 if 和 else 塊語句。 您的原始代碼與您在這里所說的相矛盾。

 $(".input1").keyup(function() { var dInput = $(this).val(); if(dInput >= 0.4 && dInput <= 0.6) { $(".input2").removeAttr("readonly"); } else { $(".input2").attr('readonly',true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="input1" o id="input1" name="input1" value="" /> <input type="text" class="input2" id="input2" name="input2" value="" readonly />

Answer 2

您將屬性設置為錯誤的條件。 我也更喜歡input事件而不是keydown ：

 $(".input1").on('input', function() { var dInput = $(this).val(); if(dInput >= 0.4 && dInput <= 0.6){ $(".input2").removeAttr("readonly"); } else{ $(".input2").attr('readonly', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="input1" id="input1" name="input1" value="" /> <input type="text" class="input2" id="input2" name="input2" value="" readonly />

Answer 3

使用鍵位

 function isNumberKey(e){ } $(".input1").keyup(function() { var dInput = $(this).val(); dInput = parseFloat(dInput); console.log(dInput); if(dInput >= 0.4 && dInput <= 0.6) { $(".input2").attr('readonly',true); } else { $(".input2").removeAttr("readonly"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="input1" onkeypress="return isNumberKey(event)" id="input1" name="input1" value="" /> <input type="text" class="input2" onkeypress="return isNumberKey(event)" id="input2" name="input2" value="" readonly />