1つのテキストボックスに1つの値しか含めることができないようにするためのJavaScript

Question

2つのテキストボックスはオプションで、1つにしかデータを入れることはできません。私はそれが何かを入力したときに他のテキストボックスを動的に有効/無効にする必要があります。デフォルトでは両方とも有効にする必要がありますが、もう一方に何かが入力されたときは無効にする必要があります。私はこれを下のコードで動作させましたが、今ではそうしていないようです。基本的には、値が入力されているかどうかを確認するために毎秒30秒ごとにチェックします。

setInterval(function(){ 
if ($("input[name=audioUri]").val().length != 0) { 
    $("input[name=videoUri]").attr("disabled", "disabled"); 
    $("input[name=audioUri]").attr("disabled", ""); 
} else if ($("input[name=videoUri]").val().length != 0) { 
    $("input[name=audioUri]").attr("disabled", "disabled"); 
    $("input[name=videoUri]").attr("disabled", ""); 
} else { 
    $("input[name=videoUri]").attr("disabled", ""); 
    $("input[name=audioUri]").attr("disabled", "");  
}} , 500); 

これは、ページのロード時にテキストボックス内の値と、そこから何をすべきかを決定するが、私は最初のページをロードする場合、両方のボックスが無効になっているが、すでに存在しているかどうかを確認します。彼らはすでにテキストボックスに何かがあると思うようです。ボックスの値をチェックすると、空の文字列 ""です。おそらく、私は.val（）！= ""を確認する必要がありますか？

私は、setInterval関数を必要とせずにそれを処理するより良い方法があると思っています。何か案は？

UPDATE： http://jsfiddle.net/7mKzy/1/

Answer 1

はい、ユーザーがテキストを入力開始したときにトリガする、keyupまたはkeypressを試みることができます。

Answer 2

テキストボックスでイベント.change（）を使用できます。だから毎回あなたのテキストボックスに変更があります。他のテキストボックスを有効または無効にする関数を呼び出します。

$("#IdTextbox").change(function() { 
     yourFunction(); 
    }); 

あなたのテキストボックスには、いくつかのデータの使用を持っているかどうかを確認するには、次の

if ($('#txt').val() != "") { 
      doSomething(); 
} 

Answer 3

は両方とも有効にしましょう、と設定した間隔を使用しないでください。 テキストボックスにパラメータonChangeまたはkeyupまたはkeypressを使用して、ボックスに新しいものがあるかどうかを確認する機能を呼び出し、有効/無効を行います。

Answer 4

はkeydown()でそれを行うとprop()を使用します。

$('input[name=audioUri]').keydown(function(){ 
    if (!$(this).val()) { 
     $('input[name=videoUri]').prop("disabled", true); 
    } 
}); 

をそして、ちょうど準備ができてDOMでそれを行う、負荷をチェックするために：

$(function(){ 
    if (!$('input[name=audioUri]').val()) { 
     $('input[name=videoUri]').prop("disabled", true); 
    } 
}); 

あなたはおそらくDRYそれを維持する関数を記述する必要があります。