別のフィールドに値がある場合にjqueryを使用してフィールドを無効にする（動的に）

Question

ユーザーがinput1に値を入力し始める場合、input2を無効にしたいとします。

input1に値がない場合（値が削除された場合など）、input2も再度有効にします。

これまで私がこれまでに書いたことはありますが、動作しません。そのような

<input id="input1" type="text"> 
<input id="input2" type="text"> 

<script> 
      $(document).ready(function() { 
      if($('#input1').val()) 
      { 
       $('#input2').prop('disabled', true); 
      } 
     }); 
</script> 

Answer 1

バインド "入力" と "にPropertyChange"：

let secondInput = $('#input2'); // Cache the jQuery element 
 
$("#input1").on(
 
    "input propertychange", 
 
    event => secondInput.prop(
 
     'disabled', 
 
     event.currentTarget.value !== "") 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input1" type="text"> 
 
<input id="input2" type="text">

これもコピー/貼り付け、でドラッグ、およびすべての他の方法で動作します。

propertychangeは必須ではありませんが、IEサポート用です。

Answer 2

最初に変更したときに2番目の入力を無効にすることをお奨めしない場合は、キーアップをリスンして無効にすることができます。この例では、最初の入力が空でない場合にのみ行います。

<input id="input1" type="text"> 
<input id="input2" type="text"> 

<script> 
    $(document).ready(function() { 
     $('#input1').on('keyup', function(e){ 
      if(e.target.value.length > 0){ 
       $('#input2').prop('disabled', true); 
      }else{ 
       $('#input2').prop('disabled', false); 
      } 
     }); 
    }); 

</script>