jq实现两个input输入同时不为空时，改变确认框背景颜色

左手喵子

已于 2024-02-12 13:17:29 修改

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript开发文章标签：前端

于 2023-10-11 21:17:53 首次发布

本文链接：https://blog.csdn.net/weixin_42017221/article/details/133779171

JavaScript开发专栏收录该内容

43 篇文章

订阅专栏

文章描述了一个简单的HTML表单，使用jQuery进行实时输入验证，当姓名和身份证号码非空时，提交按钮背景变为红色，否则为灰色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
 <html>
 <head>
    <title></title>
 </head>
 <body>
<li class="wb-real-name">
    <label class="real-name" for="">真实姓名：</label>
    <input type="text" id="input1" placeholder="请输入您的真实姓名" />
</li>
<li class="wb-id-card">
    <label class="id-card" for="">身份证号：</label>
    <input type="text" id="input2" placeholder="请输入您的身份证号码"/>
</li>
<li class="wb-submit">
    <input type="submit" class="submit" id="sb" value="确定">
</li>
 
<script type="text/javascript" src="jquery-1.9.1.js"></script>
 
<script type="text/javascript">
    $(function(){
    $('input').on('input propertychange', function() {
 
      if(($.trim($('#input1').val()) !== "") && ($.trim($('#input2').val()) !== "")){
        $('#sb').css('background','#f03468');
      } else {
         $('#sb').css('background','#999');
      }
    });
   
  });
</script>
  
 </body>
 </html>