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

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

 搞定

IT运维开发路上的点点滴滴。。。
原文地址:https://www.cnblogs.com/weijie0717/p/15186105.html