基于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 相关文章推荐
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
js图片轮播插件的封装
Jul 21 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JSONP跨域请求
2017/03/02 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
咖啡厅创业计划书范本
2014/01/22 职场文书
少先队入队活动方案
2014/02/08 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
团队队名口号大全
2014/06/06 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书