在多个文本框中输入值时启用/禁用按钮

Question

我有五个文本框和一个提交按钮。

默认情况下，我的提交按钮被禁用。

我希望在填写所有文本框中的值时，应启用按钮。

填写完一些文本框后，

按钮不应启用。

Answer 1

jQuery解决方案

<强> Demo

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解决方案

<强> Demo

这要求提交按钮的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
   }
});

Answer 3

如果您的代码恰好如下所示

<form name="urfrm">
<input type="text" value="" name="tbox1" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox2" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox3" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox4" class="txtboxtocheck"><br>
<input type="text" value="" name="tbox5" class="txtboxtocheck"><br>
<input type="submit" id="butn" name="butn" value="POST VAL" disabled><br>
</form>
<script>

通过使用jquery，您可以使用下面的代码确定文本框是空的还是填充，并启用/禁用提交按钮

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(".txtboxtocheck").change(function(){
    var enablebtn = true;
    $(".txtboxtocheck").each(function(){
        if($(this).val() == '')
            enablebtn = false;
    });

    if(enablebtn)
        $("#butn").attr('disabled',false);
    else
        $("#butn").attr('disabled',true);
});

</script>

下面是普通的javascript，用于检查文本框是否为空以启用/禁用

<form name="urfrm">
<input type="text" value="" name="tbox1" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox2" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox3" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox4" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="text" value="" name="tbox5" class="txtboxtocheck" onchange="checktxtbox()"><br>
<input type="submit" id="butn" name="butn" value="POST VAL" disabled><br>
</form>

要检查的Javascript

<script>

function checktxtbox(){
    if(document.urfrm.tbox1.value != '' && document.urfrm.tbox2.value != '' && document.urfrm.tbox3.value != '' && document.urfrm.tbox4.value != '' && document.urfrm.tbox5.value != ''){
        document.urfrm.butn.disabled=false;
    }
    else{
        document.urfrm.butn.disabled=true;
    }
}
</script>