在多个文本框中输入值时启用/禁用按钮 [英] Enable/disable a button on entering the values in multiple textboxes

问题描述

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

I have five text boxes and a submit button.

默认情况下，我的提交"按钮处于禁用状态.

By default, my submit button is disabled.

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

I want that, on filling the values in all the text boxes, button should be enabled.

按钮不应启用.

推荐答案

jQuery解决方案

演示

jQuery Solution

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

演示

Plain Javascript Solution

Demo

这要求提交按钮的ID为 mysubmit :

This requires the submit button have an ID of 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;
        }
    }
};

这篇关于在多个文本框中输入值时启用/禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！