Question

我为所需输入编写了一个简单的值检查器，请在此处查看演示：

http://wip.redaxscript.com/login

$('.required').keyup(function(){
    if($(this).val() == '') {
        $(this).addClass('warning');
        $('.meet').addClass('disabled').attr('disabled',true);
    } else {
        $(this).removeClass('warning');
        //if($(this).siblings('.required').val() == '') {
        //this should check if other requiered fields are empty
        //but it fails
            $('.meet').removeClass('disabled').attr('disabled',false);
        //}
    }
});

如果你1.为两个输入输入一个值，2。删除两个 - 和3.然后输入一个值，提交启用（失败） - 但是一个需要的输入是空白的，所以提交仍然有被禁用。

我试图检查兄弟姐妹“.required”的值，但它不起作用。

Answer 1

如果值为空，您可能希望开始禁用提交按钮，并在两者都有内容时更改它。尝试：

if($('.meet').val() == ''){
    $('.meet').addClass('disabled').attr('disabled',true);
}

$('.required').keyup(function(){
    if($(this).val() == '') {
        $(this).addClass('warning');
    }else{
        $(this).removeClass('warning');
    }

    if($('.required[value=]').length == 0){
        $('.meet').removeClass('disabled').attr('disabled',false);
    }else{
        $('.meet').addClass('disabled').attr('disabled', true);
    }
});

Answer 2

假设您只想在兄弟姐妹的所有有值时启用该按钮：

if ($('.required[value=]').length > 0)
    $('.meet').removeClass('disabled').attr('disabled',false);

请注意，$(this).siblings('.required')不会返回任何元素，因为它只返回直接兄弟。（input的唯一直接兄弟是label）

Answer 3

您应该从禁用登录按钮开始。您还应将已禁用的属性设置为disabled，而不是true和false。

您的支票

$(this).siblings('.required').val() == ''

不起作用，因为您所在的输入字段没有兄弟.required。您的HTML看起来像这样。但第二个输入不是兄弟姐妹，因为它有不同的父母。

<li>
    <label for="username">Benutzername:</label>
    <input type="text" name="username" id="username" class="text required" value="" maxlength="10" />
</li>
<li>
    <label for="password">Passwort:</label>
    <input type="password" name="password" id="password" class="text required" value="" maxlength="10" />
</li>

更正了jQuery foo

$('.meet').addClass('disabled').attr('disabled','disabled');
$('.required').keyup(function(){
    if($(this).val() == '') {
        $(this).addClass('warning');
        $('.meet').addClass('disabled').attr('disabled','disabled');
    } else {
        $(this).removeClass('warning');
        if($(this).parent().next().find('input.required').val() != '') {
            $('.meet').removeClass('disabled').attr('disabled','');
        }
    }
});

jQuery输入检查 - 禁用提交 - 问题

3 个答案: