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

【问题标题】：Jquery :: How to able disabled onclick button when input isn't empty anymore?Jquery ::当输入不再为空时如何禁用onclick按钮？
【发布时间】：2014-05-21 23:42:14
【问题描述】：

我的 Jquery 函数有问题。如果表单的字段为空，我想禁用按钮#next，如果字段不再为空，我想禁用按钮...但是当字段不为空时，#next 不会改变... 对我有帮助吗？ :/ 谢谢！

$(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"
        });
    }
});

【问题讨论】：

你的 HTML 表单在哪里？
我搜索了如何做到这一点......我只是个菜鸟。

标签： javascript jquery function

【解决方案1】：

以上代码在页面加载事件期间只执行一次。

您需要检查字段是否为空/不在 blur 事件中，或将事件绑定到表单的最后一个元素。当用户填写表单的最后一个元素时，检查前面的字段是否为空，并在此基础上启用按钮。

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

$(".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"
        });
    }
});

希望对你有所帮助。

【讨论】：

【解决方案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);
        });
    });
});

JS Fiddle Demo

【讨论】：