上記の入力ボックスがjqueryを使用して入力されている場合は、ボタンを有効にしますか？

Question

HTML：

<input type="text" id="message"/> 
<input type="text" id="message1"/> 
<input type="button" class="sendButton" value="submit"/> 

このコードは、2つの入力ボックスを表示し、1ボタンを提出します。

のjQuery：

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 

    $("#message,#message1").bind(" change",function(){ 
     if($(this).val().length !=0){ 
      $('.sendButton').attr('disabled', false); 
     } 
     else 
     { 
      $('.sendButton').attr('disabled', true);   
     } 
    }); 
}); 

これは私のjQueryのボタンを有効または無効にすることです。しかし、フィールドの1つが塗りつぶされている場合、ボタンが有効になります。両方の入力フィールドが塗りつぶされている場合にのみ有効にします。

Answer 1

$(document).ready(function(){ 
 
$('#message'&&'#message1').keyup(function(){ 
 
$('.sendButton').attr('disabled', false) 
 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="message"/> 
 
<input type="text" id="message1"/> 
 
<input type="button" class="sendButton" value="submit" disabled/>

Answer 2

したがって、両方の要素をチェックして、val()を確認してください。 lengthにアクセスする必要はありません。

$(document).ready(function() { 
    $('.sendButton').attr('disabled',true); 

    const message = $('#message'); 
    const message1 = $('#message1'); 

    $("#message, #message1").on("change",function() { 

     if(message.val() && message1.val()){ 
     $('.sendButton').attr('disabled', false); 
     } else { 
     $('.sendButton').attr('disabled', true);   
     } 

    }); 
}); 

Answer 3

ここには単純な小さな解決策があります。ハードコードIDとchangeイベントを確認する代わりに、実際にinputとinputイベントを使用することができます。これは、あなたの入力要素が増加しても、意味、このスニペットは動作します：

$('input').on('input', function() { 
 
    $(".sendButton").prop('disabled', true); 
 
    if (checkIfEmpty()) { 
 
    $(".sendButton").prop('disabled', false); 
 
    } 
 
}); 
 

 
function checkIfEmpty() { 
 
    var flag = true; 
 
    $('input').each(function() { 
 
    var enteredValue = $(this).val(); 
 

 
    if ($.trim(enteredValue).length == 0) 
 
     flag = false; 
 
    }); 
 
    return flag; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="message" /> 
 
<input type="text" id="message1" /> 
 
<input type="button" class="sendButton" value="submit" disabled />

Answer 4

あなたは次のように個別に各textboxの値を取得する必要があります。そして、次のようにpropメソッドを使用することができます。

$("#message, #message1").keyup(function() { 
 
    var msg = !$("#message").val(), 
 
     msg1 = !$("#message1").val(); 
 
    
 
    $('.sendButton').prop('disabled', (msg || msg1)); 
 
}).keyup(); //to call on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="message" /> 
 
<input type="text" id="message1" /> 
 
<input type="button" class="sendButton" value="submit" />