いずれかの入力が空の場合、jQuery無効化ボタン

Question

ボタンはデフォルトで無効になっています。 2つのテキスト入力があります。いずれかが空白の場合、フォームは無効のままにしておきます。両方のフィールドに値がある場合は、ボタンを有効にする必要があります。

これをしようと

...

$(document).ready(function(){ 
    $('#custNameNext').prop('disabled',true); 
    $('#customer').keyup(function(){ 
     $(this).val($(this).val().replace(/[^\w\s]+/g, '')); 
     $('#custNameNext').prop('disabled', ((this.value == '') || ($('#customerCost').val() == '')) ? true : false); 
    }); 
}); 

...しかし、私は、keyUpイベントにいるB/C、ボタンは、私は両方のフィールドに値を持っていない限り有効にしてから、最初のフィールドに戻りません。キーアップで追加テキストを入力します。

これを考えて問題がある！

Answer 1

空になっている場合、これはあなたのために働くべきでチェックする値でフィルタ：

$(document).ready(function() { 
 
    $('#custNameNext').prop('disabled', true); 
 

 
    function validateNextButton() { 
 
    var buttonDisabled = $('#customer').val().trim() === '' || $('#customerCost').val().trim() === ''; 
 
    $('#custNameNext').prop('disabled', buttonDisabled); 
 
    } 
 

 
    $('#customer').on('keyup', validateNextButton); 
 
    $('#customerCost').on('keyup', validateNextButton); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="customer" name="first-input" type="text"> 
 
    <input id="customerCost" name="second-input" type="text"> 
 
    <input id="custNameNext" type="submit" value="Submit" disabled="disabled"> 
 
</form>

私はidsを挿入しましたすでにあなたのスニペットに入っていました。提案として、長いコード行を省略し、より一貫性のあるコードに分割する方がよいでしょう。

buttonDisabledに保持されているテストステートメントを変更することができます。送信ボタンを有効にするためのその他の検証（正規表現など）が必要ですか。

Answer 2

イベントハンドラに両方の入力を追加し、inputイベントを使用すると、貼り付けや他のいくつかのシナリオもキャプチャします。

それからちょうどそれらのいずれかが

$(document).ready(function() { 
    $('#custNameNext').prop('disabled', true); 

    $('#customer, #customerCost').on('input', function() { 
      var val = $('#customer, #customerCost').filter(function() { 
       return this.value.trim().length !== 0; 
     }).length === 0; 

     $('#custNameNext').prop('disabled', val); 
    }); 
}); 

FIDDLE