输入框为空时，按钮灰色不可点 

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>测试页面</title>
    </head>
    <body>
        <form  style="display: inline" onsubmit="return false" action="##" method="post">
            {% csrf_token %}
            <div>
                <label for="user_id">用户名:</label>
                <input type="text" name="username" maxlength="35" onblur="checkInput()" oninput="changeBtnable()" autofocus required id="user_id" placeholder="请输入用户名">
            </div><br/><br/>
            <button type="submit" id="btn" disabled onclick="add_user()" class="btn btn-primary">
                <i class="fa fa-plus" aria-hidden="true"></i> 添加用户
            </button>&nbsp;&nbsp;
            <button type="submit" id="btn1" disabled  onclick="reset_pwd()" class="btn btn-primary">
                <i class="fa fa-repeat" aria-hidden="true"></i> 密码重置
            </button>&nbsp;&nbsp;
            <button type="submit" id="btn2" disabled  onclick="chk_user()" class="btn btn-primary">
                <i class="fa fa-trash" aria-hidden="true"></i> 删除用户
            </button>
        </form>
    
        <script language="JavaScript" type="text/javascript">
            function changeBtnable(){
                $("#btn").removeAttr("disabled");
                $("#btn1").removeAttr("disabled");
                $("#btn2").removeAttr("disabled");
            }
　　　　　　　//button 加disable 属性，shizhi
            function changeBtndisable(){
                $("#btn").attr("disabled","true");
                $("#btn1").attr("disabled","true");
                $("#btn2").attr("disabled","true");
            }
　　　　　　　//检测输入框是否为空
            function checkInput(){
                var text = $("#user_id").val();
                if(text==null||text==""){
                    changeBtndisable();
                }
            }
        </script>
    </body>
</html>

 

 搞定

 


__EOF__

本文作者：语 默
本文链接：https://www.cnblogs.com/weijie0717/p/15186105.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   语~默  阅读(536)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· Qt个人项目总结 —— MySQL数据库查询与断言
历史上的今天：
2014-08-25 Dell 服务器安装方法介绍
点击右上角即可分享
微信分享提示