Javascript 如何动态启用/禁用按钮_Javascript

Javascript 如何动态启用/禁用按钮

javascript

Javascript 如何动态启用/禁用按钮,javascript,Javascript,根据答案，我尝试创建一个类似的验证函数： <html> <head> <script> $("#my_name_id").on("change", function() { if (!$("#my_name_id").val()) { $("#button_id").attr("disabled", "disabled");

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

<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>


$（“#我的名字(id”）。在（“更改”，函数（）上）{
if（！$（“#我的名字_id”）.val（））{
$（“按钮id”）.attr（“禁用”、“禁用”）；
}否则{
$（“按钮id”）.attr（“已启用”、“已启用”）；
}
});
我的纽扣

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

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

您应该使用

prop（）

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

prop

。

的HTML中没有

启用的

属性，因此操作

禁用的

属性：

<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>


$（#我的名字(id)）。在（“更改”，函数（）{
if（！$（“#我的名字_id”）.val（））{
$（“按钮id”）.attr（“禁用”、“禁用”）；
}否则{
$（“按钮id”）.removeAttr（“禁用”）；
}
}).触发（“变更”）；；

您应该使用

prop

，而不是

attr

。毕竟，您的代码将变得更简单：

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

还要注意如何使用

触发器

，以便在页面加载时自动运行初始检查。我还包括了

keyup

事件，以便在您键入时使用它

演示：你不能只做

？我尝试了你的解决方案，但是在html初始加载时按钮仍然可以单击。@DirtyPenguin，默认设置为

禁用

。如果默认设置为

禁用

，当我开始在输入框中键入文本时，按钮未启用。。如果我键入一些文本，然后在输入框外单击，则示例有效。但是，我希望这样，当您键入某个内容时，按钮就会启用（无需首先单击外部）。很酷，这很有效：）您可以更新您的答案以包含

keyup

？您提供的JSFIDLE可以工作，但当我在桌面上创建.html文件并手动尝试时，它不起作用（按钮仍处于启用状态）。是否需要包含/启用任何其他代码？请确保在加载DOM时执行此代码。尝试将其包装到文档就绪闭包

$（function（）{/*代码位于此处*/}）

。或者将代码移到表单标记之后。当您说加载了

DOM

时，您的意思是将整个解决方案包装到另一个

$（function（）{$（“#my#u name_id”）…}

？但是，我确实将

..

块放在

表单

部分之后，得到了相同的结果。

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