両方の入力フィールドが値を持たない限り、ボタンは無効になります

2つの入力フィールドと送信ボタンがページにあります。両方に値があるまで、が無効になっています。 2つの入力フィールド。両方のフィールドに値が入力されている場合にのみ、ボタンがクリック可能になります。両方の入力フィールドが値を持たない限り、ボタンは無効になります

これをjsとjQueryでどのように実装するのですか？ここでは解決策だ

<html> 
<body> 
    <form method="POST" 
    onsubmit="return this.first_name.value!='' && this.second_name.value!=''"> 
     <input type="text" id="first_name" name="first_name" 
     onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''"> 
     <input type="text" id="second_name" name"second_name" 
     onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''"> 

     <input type="submit" value="Submit" disabled="disabled"> 
    </form> 
</body> 
</html>

出典

2011-03-09 Mellon

はJQuery：jQuery disable/enable submit button

ピュアJSここ

は私のページですjQueryを使用して：

HTML（私は送信ボタンにIDを追加したことに注意してください）：

<form method=post> 
    <input type="text" id="first_name"> 
    <input type="text" id="second_name"> 
    <input type="submit" value="Submit" id="submit" disabled> 
</form>

のJavaScript/jQueryの：

$(':text').keyup(function() { 
    if($('#first_name').val() != "" && $('#second_name').val() != "") { 
     $('#submit').removeAttr('disabled'); 
    } else { 
     $('#submit').attr('disabled', true); 
    } 
});

の作業例：http://jsfiddle.net/nc6NW/1/

出典

2011-03-09 15:41:24 mplungjan

については、純粋なjQueryの中でそれを行う方法、ありがとう！ – Mellon

@Mellon最新情報をご覧ください。あなたのjQueryの質問は重複しています – mplungjan

送信ボタンの名前を忘れたと思います。そうですか？ – prodeveloper

：

<html> 
<body> 
    <form method=post> 
     <input type=text id='first_name'> 
     <input type=text id='second_name'> 
     <input type=submit value=Submit> 
    </form> 
</body> 
</html>

私は両方のJSとjQueryのソリューションを持っていると思い

出典

2011-03-09 15:44:24 davehauser

しかし、両方のフィールドを塗りつぶした後、ボタンを有効にするために別の場所をクリックする必要があります。ボタンは自動的にアクティブではありません。 – Mellon

あなたが正しいです、私はソリューションを更新し、 '.change（function（）...'を '.keyup（function（）...'に変更しました。 – davehauser

がためname財産を忘れてはいけませんあなたのフォームフィールド！

<html> 
<head> 
<script type="text/javascript" src="path.to/jquery.js" /> 
<script type="text/javascript"> 
$(function() { // on document load 

    var fn = function() { 
     var disable = true; 
     $('#myForm input[type:text]').each(function() { // try to find a non-empty control 
      if ($(this).val() != '') { 
      disable = false; 
      } 
     }); 

     $('#myForm input[type:submit]').attr('disabled', disable); 
    } 

    $('#myForm input[type:text]').change(fn); // when an input is typed in 
    fn(); // set initial state 
}); 
</script> 
<body> 
    <form id="myForm" method="POST"> 
     <input type="text" id="first_name"> 
     <input type="text" id="second_name"> 
     <input type="submit" value="Submit"> 
    </form> 
</body> 
</html>

出典

2011-03-09 15:45:18

$(function(){ 
    $("#first_name, #second_name").bind("change keyup", 
    function(){ 
    if($("#first_name").val() != "" && $("#second_name").val() != "") 
     $(this).closest("form").find(":submit").removeAttr("disabled"); 
    else 
     $(this).closest("form").find(":submit").attr("disabled","disabled"); 
    }); 
});

出典

2011-03-09 15:50:36 Quincy

両方の入力フィールドが値を持たない限り、ボタンは無効になります

答えて

関連する問題