javascript - 複数のテキストボックスに値を入力する際のボタンを有効/無効にする

Question

5 つのテキスト ボックスと送信ボタンがあります。

デフォルトでは、送信ボタンは無効になっています。

すべてのテキスト ボックスに値を入力するときに、ボタンを有効にする必要があります。

ボタンは、一部のテキスト ボックスのみに入力した後は有効にしないでください。

Answer 1

jQuery ソリューション

デモ

function doCheck(){
    var allFilled = true;
    $('input[type=text]').each(function(){
        if($(this).val() == ''){
            allFilled = false;
            return false;
        }
    });
    $('input[type=submit]').prop('disabled', !allFilled);
}

$(document).ready(function(){
    $('input[type=text]').keyup(doCheck).focusout(doCheck);
});

プレーン Javascript ソリューション

デモ

これには、送信ボタンに次の ID が必要ですmysubmit:

function doCheck(){
    var allFilled = true;

    var inputs = document.getElementsByTagName('input');
    for(var i=0; i<inputs.length; i++){
        if(inputs[i].type == "text" && inputs[i].value == ''){
            allFilled = false;
            break;
        }
    }

    document.getElementById("mysubmit").disabled = !allFilled;
}

window.onload = function(){
    var inputs = document.getElementsByTagName('input');
    for(var i=0; i<inputs.length; i++){
        if(inputs[i].type == "text"){
            inputs[i].onkeyup = doCheck;
            inputs[i].onblur = doCheck;
        }
    }
};

Answer 2

次のようなコードを使用できます。

var inputs = $('input');
inputs.keypress(function() {
   var count = 0;
   inputs.each(function() {
       if ($(this).val()) {
           count++
       }
   });
   if (count === inputs.length-1) {
      // enable the button
   } else {
      // disable the button so it will be disabled if someone remove the text
   }
});