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>
扫一扫
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
