同时满足多个文本框不为空值按钮呈现可用激活状态disabled

简介:

项目需要,自己写了一个jquery代码,该代码需要满足两个文本框都不为空值,按钮才可用激活状态。

请转载此文的朋友务必附带原文链接,谢谢。

原文链接:http://xuyran.blog.51cto.com/11641754/1827959

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
< html >
     < head >
         < meta  charset = "UTF-8" >
         < meta  name = "viewport"  content = "width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" >
         < script  src = "../../js/jquery.js" ></ script >
         < script  src = "../../js/mui.min.js" ></ script >
         < link  href = "../../css/mui.min.css"  rel = "stylesheet"  />
         < link  rel = "stylesheet"  href = "../../css/iconfont.css" >
         < link  rel = "stylesheet"  href = "../../css/app.css" >
         < title >红包设置</ title >
         < script >
             $(document).ready( function(){
                  $(".mui-input-row input").keyup(function(){
                    var value2 = $(this).parent().siblings().find("input").val();
                 
             if( this.value !=""&& value2 !=""){
                 $(".sc-btn button").attr("disabled",false);
             }else{$(".sc-btn button").attr("disabled",true);}
           });
 
                 
});
         </ script >
         < style >
             html,body{background: #fef9f4;}
             .mui-content{padding-top: 20px;background: #fef9f4;}
             .mui-input-row,.mui-input-row:last-child{width: 90%;margin: auto;background: #FFFFFF;margin-bottom: 10px;}
             .mui-input-row label{font-family: "微软雅黑";}
             h2{text-align: center;font-weight: normal;padding: 40px 0 0;}
             .sc-btn{width: 90%;margin: auto;padding-top: 80px;}
             .mui-btn-block{padding: 10px 0;}
             .mui-btn-blue{background: #a02227;border: none;}
             .mui-btn-blue.focus-active{background: #a02227;}
         </ style >
         
     </ head >
     < body >
         < div  class = "mui-content" >
         < div  class = "mui-input-row" >
             < label >红包个数</ label >
             < input  type = "text"  placeholder = "填写红包个数" >
         </ div >
         < div  class = "mui-input-row" >
             < label >单个金额</ label >
             < input  type = "text"  placeholder = "填写神灯币" >
         </ div >
         < h2 >¥30个神灯币</ h2 >
          < div  class = "sc-btn" >
           < button  type = "button"  class = "mui-btn mui-btn-blue mui-btn-block"  disabled = "disabled" >付款</ button >
            </ div >
         </ div >
     </ body >
</ html >

效果预览:

wKioL1eO1rXjVrZiAAAy-c4bZpY303.png-wh_50

wKiom1eO1raAu_yWAAAwm9Uqt84231.png-wh_50

本文转自  小旭依然  51CTO博客,原文链接:
http://blog.51cto.com/xuyran/1827959
相关文章
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
5372 0
|
存储 机器学习/深度学习 安全
Java基础+进阶
本文适合Java入门和复习回顾。内容覆盖JDK下载和hello world、IDEA下载安装配置、类、基本数据类型、方法、修饰符、关键字、面向对象、继承、多态、接口、异常、集合、i/o流、多线程、网络编程、Lambda表达式、接口组成更新、方法引用、函数式接口、 Stream流、 反射、模块化、XML
Java基础+进阶
|
SQL 关系型数据库 数据库
postgresql数据库修改参数的方式
在PostgreSQL数据库中,你可以通过多种方式修改数据库参数,以更改其行为。以下是一些常见的修改数据库参数的方式: 1. **通过配置文件修改(postgresql.conf):** PostgreSQL的配置文件是 `postgresql.conf`。你可以直接编辑该文件,找到要修改的参数,修改其值,然后重新启动PostgreSQL服务以使更改生效。 通常,`postgresql.conf` 文件位于 PostgreSQL 数据目录下。修改完毕后,确保重新启动 PostgreSQL 服务。 2. **使用 ALTER SYSTEM 命令:** PostgreSQL
828 2
|
运维 安全 存储
【网络建设与运维】2024年河北省职业院校技能大赛中职组“网络建设与运维”赛项规程
【网络建设与运维】2024年河北省职业院校技能大赛中职组“网络建设与运维”赛项规程
【网络建设与运维】2024年河北省职业院校技能大赛中职组“网络建设与运维”赛项规程
|
11月前
|
机器学习/深度学习 缓存 Linux
python环境学习:pip介绍,pip 和 conda的区别和联系。哪个更好使用?pip创建虚拟环境并解释venv模块,pip的常用命令,conda的常用命令。
本文介绍了Python的包管理工具pip和环境管理器conda的区别与联系。pip主要用于安装和管理Python包,而conda不仅管理Python包,还能管理其他语言的包,并提供强大的环境管理功能。文章还讨论了pip创建虚拟环境的方法,以及pip和conda的常用命令。作者推荐使用conda安装科学计算和数据分析包,而pip则用于安装无法通过conda获取的包。
1072 0
|
机器学习/深度学习 人工智能 网络协议
人工智能平台PAI 操作报错合集之在本地运行Alink Server时没有遇到问题。但是,当您尝试在PAI上运行时出现了错误。如何解决
阿里云人工智能平台PAI (Platform for Artificial Intelligence) 是阿里云推出的一套全面、易用的机器学习和深度学习平台,旨在帮助企业、开发者和数据科学家快速构建、训练、部署和管理人工智能模型。在使用阿里云人工智能平台PAI进行操作时,可能会遇到各种类型的错误。以下列举了一些常见的报错情况及其可能的原因和解决方法。
|
机器学习/深度学习 数据采集
区间预测 | MATLAB实现基于QRCNN-BiGRU卷积双向门控循环单元多变量时间序列区间预测
区间预测 | MATLAB实现基于QRCNN-BiGRU卷积双向门控循环单元多变量时间序列区间预测
|
存储 消息中间件 监控
消息中间件系列四、认识AMQP和RabbiyMq的简单使用
AMQP AMQP(advanced message queuing protocol)是一个提供统一消息服务的应用层标准协议,基于此协议的客户端与消息中间件可传递消息,并不受客户端/中间件不同产品,不同开发语言等条件的限制 。
3648 89
|
Java 开发工具 Python
Python 静态分析Pylint、Pyflakes 与 Mypy ——我应该用谁?
Python 静态分析Pylint、Pyflakes 与 Mypy ——我应该用谁?
374 0
|
机器学习/深度学习 自然语言处理 机器人
Soft-Masked BERT:文本纠错与BERT的最新结合
Soft-Masked BERT:文本纠错与BERT的最新结合