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

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

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

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

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

效果预览:

时间: 2024-10-12 10:17:39

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

将文本框设置为只读和不可用状态

将文本框设置为只读和不可用状态: 本章节通过实例代码介绍一下如何将文本框设置为只读或者不可用状态,当然比较简单的操作,希望能够对初学者能够带来一定的帮助,代码实例如下: <input type="text" value="蚂蚁部落" readonly/><br/> <input type="text" value="蚂蚁部落" disabled/> 关于只读和不可用的区别可以参阅标签的rea

Python3 Tkinter基础 Text Button 文本框中插入一个按钮

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: from tkinter import * root=Tk() #30个字符宽 2行 mytext=Text(root,width=30,height=2) mytext.pack(padx=10,pady=10) b1=Button(mytext,text='

做一个计时器示例 在页面上有一个文本框和一个普通按钮 在状态栏上显示,单击按钮,开始计时的提示信息 单击按钮时,在文本框显示计数的过程,同时要求按钮上的字,显示为“单击暂停” 此时单击按钮,暂停计时,同时按钮上的字显示为“继续计时”,要求这两种状态来回切换,来完成计数器的功能

2015-04-12 20:15:25 方法一; <script> var s=0; var timeout=0; status='点击按钮,开始计时'; function count(){ s++; time1.value=s; timeout=setTimeout('count();',100); } function onChange(){ if(timeout==0){ count(); time2.value='暂停计时'; status='点击按钮,暂停计时'; }else{ cl

设置textarea文本框不可以拖动改变大小

设置textarea文本框不可以拖动改变大小:在默认状态下,textarea文本框可以使用鼠标拖动调整大小,可能在某些情况下需要禁止此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

css中文本框与按钮对不齐解决方案

我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> <input type=”submit” name=”button” id=”button” value=”提交” /> </form> CSS 代码 #text1{border:1px solid red;height:20px;} #button{background:#FFFFFF;co

Java知多少(86)文本框和文本区的输入输出

在GUI中,常用文本框和文本区实现数据的输入和输出.如果采用文本区输入,通常另设一个数据输入完成按钮.当数据输入结束时,点击这个按钮.事件处理程序利用getText()方法从文本区中读取字符串信息.对于采用文本框作为输入的情况,最后输入的回车符可以激发输入完成事件,通常不用另设按钮.事件处理程序可以利用单词分析器分析出一个个数,再利用字符串转换数值方法,获得输入的数值.对于输出,程序先将数值转换成字符串,然后通过setText()方法将数据输出到文本框或文本区. [例 11-9]小应用程序设置一

十. 图形界面(GUI)设计7.文本框和文本区的输入输出

在GUI中,常用文本框和文本区实现数据的输入和输出.如果采用文本区输入,通常另设一个数据输入完成按钮.当数据输入结束时,点击这个按钮.事件处理程序利用getText()方法从文本区中读取字符串信息.对于采用文本框作为输入的情况,最后输入的回车符可以激发输入完成事件,通常不用另设按钮.事件处理程序可以利用单词分析器分析出一个个数,再利用字符串转换数值方法,获得输入的数值.对于输出,程序先将数值转换成字符串,然后通过setText()方法将数据输出到文本框或文本区. [例 11-9]小应用程序设置一

Ajax和Json实现后台传集合给前台并赋值文本框-----Ajax\Json\JQuery

功能:放两个文本框和一个确定按钮,确定按钮绑定点击事件,点击确定就加载后台数据库中的数据,显示在文本框中. 基础知识:JQuery  ajax异步 .eval() .each() json数据 1.HTML文件 <div id="Text"> <input type="text" id="comment1" name="t_A21" numberID="one" value="&

JavaFX学习之道:文本框TextField

原文地址http://download.oracle.com/javafx/2.0/ui_controls/text-field.htm TextField类实现了一种可以接受和显示文本输入的UI控件,它提供了接受用户输入的功能.和另一个文本输入控件PasswordField一起都继承了TextInput这个类,TextInput是所有文本控件的父类. Figure 8-1 是一个带有标签的典型文本框. Figure 8-1 Label and Text Field Description of