几个input必须都填写否则button灰化

最新推荐文章于 2024-12-29 16:53:30 发布

原创最新推荐文章于 2024-12-29 16:53:30 发布 · 935 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #javascript #button灰化

HTML、CSS、JS技术问题专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS、JavaScript等技术实现的输入验证案例，通过监听输入事件，动态改变提交按钮的样式，提升用户体验。重点在于如何在前端实现简单的逻辑判断，并通过CSS样式调整按钮状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style type="text/css">
        body{
            padding: 30px;
        }
        a:hover,.btn1{
            font-size:1.2rem;
            border-radius:2px;
            height:2rem;
            line-height:2rem;
            color:#999;
            border-bottom:.3rem solid #bbb;
            text-align:center;
            display:block;
            background:#f5f5f5;
            text-decoration: none;
            width: 100px;

        }
    </style>
</head>
<body>
<input id="new_input_1" type="tel" maxlength="1" class="inp1"><br>
<input id="new_input_2" type="tel" maxlength="1" class="inp1"><br>
<input id="new_input_3" type="tel" maxlength="1" class="inp1"><br>
<input id="new_input_4" type="tel" maxlength="1" class="inp1"><br>
<input id="new_input_5" type="tel" maxlength="1" class="inp1"><br>
<input id="new_input_6" type="tel" maxlength="1" class="inp1"><br>
<a id="sub" class="btn1" >提交</a>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
<script>
    var a=$("#new_input_1");
    var b=$("#new_input_2");
    var c=$("#new_input_3");
    var d=$("#new_input_4");
    var e=$("#new_input_5");
    var f=$("#new_input_6");

    $("input").on("keyup",function(){
        var mb=a.val().trim().length && b.val().trim().length && c.val().trim().length && d.val().trim().length && e.val().trim().length && f.val().trim().length;
        if(mb){
          //  alert(aa);
//            alert($(this).val());
            $("#sub").css({
                "background":"#e34f49",
                "color":"#fff",
                "border-bottom":".3rem solid #cd322c"
            });
        }else{
            $("#sub").css({
                "background":"#f5f5f5",
                "color":"#999",
                "border-bottom":".3rem solid #bbb"
            });
        }
    });


</script>

</body>
</html>