Question

根据答案here，我尝试创建一个类似的验证函数：

<html>
    <head>
        <script>
            $("#my_name_id").on("change", function() {
                if (!$("#my_name_id").val()) {
                $("#button_id").attr("disabled", "disabled");
            } else {
                $("#button_id").attr("enabled", "enabled");
            }
                });
        </script>
    </head>
    <body>
        <form action="" name="test_form" id="test_form_id" method="post">
            <input type="text" name="my_name" id="my_name_id" placeholder="Type your name"/>
            <button type="submit" id="button_id">My button</button>
        </form>
    </body>
</html>

在这个例子中，我想不断检查输入框是否包含任何字符。如果是，则应启用该按钮（可单击）。如果输入框不包含任何文本，则应禁用该按钮。

但是，在我的情况下，按钮始终保持启用状态。我在这里做错了什么？

Answer 1

HTML中的

没有enabled属性，因此请操纵disabled属性：

<script>
$("#my_name_id").on("change", function () {
    if (!$("#my_name_id").val()) {
        $("#button_id").attr("disabled", "disabled");
    } else {
        $("#button_id").removeAttr("disabled");
    }
}).trigger('change');;
</script>

Answer 2

您应该使用prop，而不是attr。毕竟你的代码变得更简单了：

$("#my_name_id").on("change keyup", function() {
    $("#button_id").prop("disabled", !this.value);
})
.trigger('change');

另请注意如何使用trigger自动对页面加载进行初始检查。我还包含keyup事件，以便在您键入时使用。

演示：http://jsfiddle.net/7nywe/

Answer 3

您应该使用prop()

$("#button_id").prop("disabled", true);  // disabled
$("#button_id").attr("disabled", false); // enabled

在处理布尔类型时，应使用prop。

如何动态启用/禁用按钮

3 个答案:

演示：http://jsfiddle.net/7nywe/