Question

我见过很多人禁用按钮的例子，如果文本框是空的但是我没有找到任何会禁用某些文本框，日期和选择字段的按钮的例子。我是Jquery的新手，我知道它是伪编码的，但你可以得到这个想法。我必须调用哪个Jquery函数才能不断检查？如何在if子句中使用or语句来确定是否有任何文本框字段为空？

HTML

<form id="myform">
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="password" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="password" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />
    Birthday<br />
    <input type="date" id="bday" name="birthday" /><br /> 
    Sex<br />
    <select name="sex" id="sex">
    <option>Male</option>
    <option>female</option>
    </select>
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

的Javascript

<script type="text/javascript>
(function() {
    $('#myform > input').keyup(function() {

        var empty = false;
        $('form > input #bday').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
</script>

JSFIDDLE

Answer 1

您可以使用on('input')并稍微更改您的选择器：

$('#myform > input').on('input', function () {

    var empty = false;
    // Don't use an ID here
    $('form > input, form > select').each(function () {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled');
    } else {
        $('#register').removeAttr('disabled');
    }
});

Fiddle

Answer 2

您在生日字段上进行了检查，由于输入日期，该字段始终填充。

因此，请务必查看以下其他字段：

   $('form > input.cant_be_empty').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
   });

将cant_be_empty类添加到所有不能为空的元素。

http://jsfiddle.net/LM4cf/1/

Answer 3

我已经更新了你的小提琴。基本上，我已经在您需要的字段上添加了必需的属性。例如，如果您只需要用户名add：

 <input type="text" id="user_input" name="username" required="true" />

然后js查找必填字段并检查它们是否为空：

(function() {
$('#myform > input').keyup(function() {
    var empty = false;
    $('form > input[required="true"]').each(function(i, ele) {
        if ($(ele).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disable');
    } else {
        $('#register').removeAttr('disabled');
    }
});
}())

另外，为什么不试试这个jQuery验证插件Here。您可以在提交表单之前选择所需的字段以及验证用户输入（例如，验证电子邮件地址）。

如何在文本框，选择和日期为空时禁用提交按钮，并在完成后启用

3 个答案: