zoukankan      html  css  js  c++  java
  • 输入框为空时,按钮灰色不可点

    <!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运维开发路上的点点滴滴。。。
  • 相关阅读:
    数据库连接代码
    智能家居资源汇总
    android应用设计与实现相关资源汇总
    嵌入式设计应用资料汇总,不定时更新中……
    Zigbee相关资料大全,不断更新中……
    H.264视频编码资料汇总,不断更新……
    星网锐捷笔试
    华为 10第二题 成都 约瑟夫环
    2014华为校园招聘上机测试题目(华科提前批)
    2014年华为校招成渝地区上机试题
  • 原文地址:https://www.cnblogs.com/weijie0717/p/15186105.html
Copyright © 2011-2022 走看看