编程 Javascript

基于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实现状态限定编辑的代码

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

基于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