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

Question

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

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

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

仅填充某些文本框后，按钮不应启用。

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
   }
});

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>