Question

我的Jquery功能有问题。如果表单的字段为空，我想禁用按钮#next，如果字段不再空，我想能够...但是当字段不空时#next不会改变... 有些帮助吗？：/感谢＆＃39; s！

$(function () {
    $('#next').prop("disabled", true).css({
        "background-color": "#424242",
        "cursor": "default"
    });
    if ($('.idinput').val() != '') {
        $('#next').prop("disabled", false).css({
            "background-color": "#1C1C1C",
            "cursor": "pointer"
        });
        $('#next').click(function () {
            $('#regdiv').animate({
                left: "-=400"
            }, 2000, function () {
                $('#next').prop("disabled", true).css({
                    "background-color": "#424242",
                    "cursor": "default"
                });
                $('#class').show("slide", {
                    direction: "left"
                }, 1500);
            });
        });
    } else {
        $('#next').prop("disabled", true).css({
            "background-color": "#424242",
            "cursor": "default"
        });
    }
});

Answer 1

上述代码仅在页面onload事件期间执行一次。

您需要检查字段是否为空/不在模糊事件上，或将事件绑定到表单的最后一个元素。当用户填写表单的最后一个元素时，检查以前的字段是否为空，并根据您可以启用该按钮。

假设，这是表单的最后一个元素：

$(".idinput").blur(function() {
    if ($('.idinput').val() != '') {
        $('#next').prop("disabled", false).css({
            "background-color": "#1C1C1C",
            "cursor": "pointer"
        });
        $('#next').click(function () {
            $('#regdiv').animate({
                left: "-=400"
            }, 2000, function () {
                $('#next').prop("disabled", true).css({
                    "background-color": "#424242",
                    "cursor": "default"
                });
                $('#class').show("slide", {
                    direction: "left"
                }, 1500);
            });
        });
    } else {
        $('#next').prop("disabled", true).css({
            "background-color": "#424242",
            "cursor": "default"
        });
    }
});

希望，这对你有帮助。

Answer 2

首先，您可以使用css代替在jQuery中应用样式来清理代码。

#next{
    background-color: #1C1C1C;
    cursor: pointer;
}

#next[disabled]{
    background-color: #424242;
    cursor: default;
}

这是一种在jQuery中执行此操作的方法。

$(function(){
    $('.idinput').on('input',function(){
        $('#next').prop("disabled", $('.idinput').val() == '');
    });

    $('#next').click(function(){
        $('#regdiv').animate({left: "-=400"}, 2000, function(){
            $('#next').prop("disabled", true);
            $('#class').show("slide", { direction: "left" }, 1500);
        });
    });
});

Jquery ::当输入不再空时，如何禁用onclick按钮？

2 个答案:

JS Fiddle Demo