2017-02-07 26 views
0

2つの入力フィールドがあります。最初のテキストフィールドに何かを入力しなければ、2番目の入力フィールドを無効にしたいと思います。最初のテキストフィールドに何かを入力すると、すぐに2番目の入力フィールドが有効になります。現在、私はこれをやってみようとしていますが、望みどおりに動作していません。入力フィールドが無効になっていないか、希望通りに有効になっています

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<input type="text" id="value1" /> 
<input type="text" id="value2" /> 

<script> 
    var val1 = Number(document.getElementById('value1').value) 
    var val2 = Number(document.getElementById('value2').value) 
    if(document.getElementById('value1').value===null ||document.getElementById('value1').value===''){ 
      document.getElementById('value2').disabled = true 
     } 
     else{document.getElementById('value2').disabled = false } 
</script> 

</body> 
</html> 

私は非常にjavascriptに新しいです。私はここでいくつかの助けが必要です。

+0

これは現在どのように機能していますか?遭遇している失敗は何ですか? –

+1

@HoriaComanイベントハンドラがないので動作しません。テキストボックスのkeydownにアタッチする必要があります。 –

+0

@CallumLiningtonええ、答えとして書く必要があります。完全に逃した:D –

答えて

2

anwserは今作業する必要があります。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<input type="text" id="value1" onkeyup="myFunction()"/> 
<input type="text" id="value2" disabled="disabled" /> 

<script> 
function myFunction() { 
    var val1 = Number(document.getElementById('value1').value) 
    var val2 = Number(document.getElementById('value2').value) 
    if(document.getElementById('value1').value===null ||document.getElementById('value1').value===''){ 
    document.getElementById('value2').disabled = true 
    }else { 
    document.getElementById('value2').disabled = false 
    } 
} 
</script> 

</body> 
</html> 
+0

修正されました。 – PSo

2

event listenerを追加し、二番目の状態を変更するために第一フィールドの値をチェックします。

var val1 = document.getElementById('value1'); 
 

 
val1.addEventListener('keyup', function() { 
 
    document.getElementById('value2').disabled = val1.value === ""; 
 
});
<input type="text" id="value1" /> 
 
<input type="text" id="value2" disabled />

+0

これは完璧に動作しています – PSo

0

てみてくださいこれは、onchange関数、

var val1 = Number(document.getElementById('value1').value) 
    var val2 = Number(document.getElementById('value2').value) 
    if(document.getElementById('value1').value===null ||document.getElementById('value1').value===''){ 
      document.getElementById('value2').disabled = true; 
     } 
     else{document.getElementById('value2').disabled = false } 

      function enableInput(argument) { 
       debugger 
       var values = document.getElementById('value1').value 
       if (values.length>0) { 
        document.getElementById('value2').disabled = false; 
       }else{ 
        document.getElementById('value2').disabled = true; 

       } 
      } 
0
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 
<body> 
<input type="text" id="value1" onblur="Call()"/> 
<input type="text" id="value2" /> 
<script> 
    var val1 = Number(document.getElementById('value1').value) 
    var val2 = Number(document.getElementById('value2').value) 
    document.getElementById('value2').disabled = true 

function Call() 
{ 
    if(document.getElementById('value1').value===null ||document.getElementById 

('value1').value===''){ 
      document.getElementById('value2').disabled = true 
     } 
     else{document.getElementById('value2').disabled = false } 
} 

</script> 

</body> 
</html> 
関連する問題