基于jquery实现状态限定编辑的代码


Posted in Javascript onFebruary 11, 2012

页面表单初始情况如图,所有文本框都是不能编辑的

基于jquery实现状态限定编辑的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>项目状态限定</title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body{ font-size:12px;} 
</style> 
<script type="text/javascript"> 
$("body").ready(function() { 
/* 项目状态对话框除checkbox外都不可用 */ 
$(":checkbox.status_Progress").parent().parent().find("select").attr("disabled", 'disabled'); 
$(":checkbox.status_Progress").parent().parent().find("input:text").attr("disabled", 'disable'); 
$(":checkbox.status_Progress").parent().parent().find("input:button").attr("disabled", 'disable'); 
/* 项目状态的进度Checkbox控制 */ 
$(":checkbox.status_Progress").click( 
function() { 
var checked = $(this).attr("checked"); 
var ind = $(":checkbox.status_Progress").index(this); 
$(":checkbox.status_Progress").removeAttr("checked"); 
$(":checkbox.status_Progress").each(function(i, domEle) { 
if ((checked && ind >= i) || (!checked && ind > i)) { 
$(domEle).attr("checked", 'true'); 
$(domEle).parent().parent().find("select").removeAttr("disabled"); 
$(domEle).parent().parent().find("input:text").removeAttr("disabled"); 
$(domEle).parent().parent().find("input:button").removeAttr("disabled"); 
} 
else { 
$(domEle).parent().parent().find("select").attr("disabled", 'disabled'); 
$(domEle).parent().parent().find("input:text").attr("disabled", 'disabled'); 
$(domEle).parent().parent().find("input:button").attr("disabled", 'disabled'); 
} 
}); 
} 
); 
}); 
</script> 
</head> 
<body align='center'> 
<center> 
<div id="dialog_status" title="项目状态"> 
<table id='form_status'> 
<tr> 
<td width='150'>状态</td> 
<td width='50'>进度</td> 
<td width='250'>负责人</td> 
<td width='150'>时间</td> 
</tr> 
<tr> 
<td>1 中标</td> 
<td><input class="status_Progress" type="checkbox" /></td> 
<td> 
<input type="text" maxlength="100" /> 
</td> 
<td><input type="text" /></td> 
</tr> 
<tr> 
<td>2 谈判</td> 
<td> <input class="status_Progress" type="checkbox" /> </td> 
<td> 
<input type="text" maxlength="100" /> 
</td> 
<td><input type="text" /></td> 
</tr> 
<tr> 
<td>3 评审</td> 
<td><input class="status_Progress" type="checkbox" /></td> 
<td> 
<input type="text" maxlength="100" /> 
</td> 
<td><input type="text" /></td> 
</tr> 
<tr> 
<td>4 签约</td> 
<td><input class="status_Progress" type="checkbox" /></td> 
<td> 
<input type="text" maxlength="100" /> 
</td> 
<td><input type="text" /></td> 
</tr> 
<tr> 
<td>5 完成</td> 
<td><input class="status_Progress" type="checkbox" /></td> 
<td> 
<input type="text" maxlength="100" /> 
</td> 
<td><input type="text" /></td> 
</tr> 
</table> 
</div> 
</center> 
</body> 
</html>

状态共有5中,要求点击某个状态的复选框时,这个状态和它之前的状态的文本框都可以编辑,之后的文本框都不可以编辑,如图示

基于jquery实现状态限定编辑的代码

实现上面的效果源码如下:

Javascript 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
JavaScript正则表达式简单实用实例
Jun 23 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 #Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 #Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 #Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 #Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 #Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 #Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 #Javascript
You might like
php SQL之where语句生成器
2009/03/24 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python实现音乐下载的统计
2018/06/20 Python
Python 函数返回值的示例代码
2019/03/11 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
职业培训师职业生涯规划
2014/02/18 职场文书
《学会待客》教学反思
2014/02/22 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
日元符号 ¥
2022/02/17 杂记