如何禁用提交按钮,直到所有文本框都不为空?

时间:2015-03-03 06:09:48

标签: javascript jquery

伙计们,请帮助我,我不能这样做:(。我想禁用我的提交按钮,直到所有字段都有值..我该怎么办?

这是我的 HTML 代码

<table>
    <tr>
        <td>First Name: <input type="text"></td>
    </tr>
    <tr>
        <td>Middle Name: <input type="text"></td>
    </tr>
    <tr>
        <td>Last Name:<input type="text"></td>
    </tr>
    <tr>
        <td><input type="submit" value="Submit"></td>
    </tr>
</table>

2 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
 $('input[type="submit"]').attr('disabled','disabled');
 $('input[type="text"]').change(function(){
        if($(this).val != ''){
           $('input[type="submit"]').removeAttr('disabled');
        }
 });
 });

试试这个你需要使用jQuery选择器

答案 1 :(得分:0)

我已经通过首先禁用按钮来修改你的html,然后我使用jQuery来检查当其中一个输入发生变化时所有输入都不为空。

function enableSubmit() {
    var disable = false;
    $("#table input[type='text']").each(function() {
        if ($(this).val()==="") {
            disable = true;
            return false;
        }
    });
    $("#table input[type='submit']").prop("disabled", disable);
}

$("#table").on("change", "input", function() {
    enableSubmit();
});
<html>
<head>
</head>

<body>

    <table id="table">
        <tr>
            <td>First Name: <input type="text"></td>
        </tr>
        <tr>
            <td>Middle Name: <input type="text"></td>
        </tr>
        <tr>
            <td>Last Name:<input type="text"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" disabled></td>
        </tr>
    </table>

</body>

</html>