jq 实现文本框有值时 button 可用，无值时不可用

freeok2019年12月25日小于 1 分钟

html、css 代码：


<div style="text-align:center;margin-top:100px;">
  <input type="text" id="txt" style="width: 300px;" placeholder="输入任意字符">
  <button id="btn">确认</button>
</div>

js 代码：

<script type="text/javascript">
    // button默认不可用
    $("#btn").prop("disabled", true);
    $("#txt").bind("input propertychange", function () {
        $("#btn").prop("disabled", $("#txt").val().length <= 0);
    });
</script>

记得引用 jq：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

补充：jq 中 prop 和 attr 的区别对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

完整 code 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="text-align:center;margin-top:100px;">
    <input type="text" id="txt" style="width: 300px;" placeholder="输入任意字符">
    <button id="btn">确认</button>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    // button默认不可用
    $("#btn").prop("disabled", true);
    $("#txt").bind("input propertychange", function () {
        $("#btn").prop("disabled", $("#txt").val().length <= 0);
    });
</script>
</body>
</html>