基于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 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue导出html、word和pdf的实现代码
Jul 31 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php 正则表达式小结
2009/08/31 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
Python实现CNN的多通道输入实例
2020/01/17 Python
百联网上商城:i百联
2017/01/28 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
国际商务专业学生个人的自我评价
2013/09/28 职场文书
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
优秀家长事迹材料
2014/05/17 职场文书
森林防火宣传标语
2014/06/27 职场文书
大学专科求职信
2014/07/02 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
实习报告怎么写
2019/06/20 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS