基于jquery實(shí)現(xiàn)狀態(tài)限定編輯的代碼
更新時(shí)間：2012年02月11日 23:09:17 作者：
基于jquery實(shí)現(xiàn)狀態(tài)限定編輯的代碼，需要的朋友可以參考下
頁(yè)面表單初始情況如圖，所有文本框都是不能編輯的
復(fù)制代碼 代碼如下:
<!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>項(xiàng)目狀態(tài)限定</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() {
/* 項(xiàng)目狀態(tài)對(duì)話框除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');
/* 項(xiàng)目狀態(tài)的進(jìn)度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="項(xiàng)目狀態(tài)">
<table id='form_status'>
<tr>
<td width='150'>狀態(tài)</td>
<td width='50'>進(jìn)度</td>
<td width='250'>負(fù)責(zé)人</td>
<td width='150'>時(shí)間</td>
</tr>
<tr>
<td>1 中標(biāo)</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 評(píng)審</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>
狀態(tài)共有5中，要求點(diǎn)擊某個(gè)狀態(tài)的復(fù)選框時(shí)，這個(gè)狀態(tài)和它之前的狀態(tài)的文本框都可以編輯，之后的文本框都不可以編輯，如圖示
實(shí)現(xiàn)上面的效果源碼如下：
相關(guān)文章
如今jQuery在網(wǎng)站上普及的程度越來(lái)越高，所以，對(duì)于jQuery的使用，即使再小的一點(diǎn)認(rèn)識(shí)、一點(diǎn)優(yōu)勢(shì)、一點(diǎn)不足，也顯得越來(lái)越值得研究和探討2012-06-06
點(diǎn)擊后可以輸入排序的數(shù)字編號(hào)，移開(kāi)后自動(dòng)更新數(shù)據(jù)庫(kù)。2010-02-02
jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動(dòng)態(tài)變換頁(yè)面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03
ztree實(shí)現(xiàn)權(quán)限橫向顯示功能
最近在做權(quán)限功能的時(shí)候，采用的ztree實(shí)現(xiàn)的，但是產(chǎn)品要求最后一層的權(quán)限節(jié)點(diǎn)要橫向顯示。下面小編把基于ztree實(shí)現(xiàn)權(quán)限橫向顯示功能的實(shí)現(xiàn)思路分享給大家，供大家參考2017-05-05
下面小編就為大家?guī)?lái)一篇jquery彈出遮掩層效果【附實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-04-04
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實(shí)現(xiàn)代碼，大家可以具體的看下面的說(shuō)明。2009-07-07
本篇文章主要是對(duì)jquery取消選擇select下拉框示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了jQuery限制圖片大小的方法,對(duì)比分析了常見(jiàn)的jQuery限制圖片操作方法及改進(jìn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
JavaScript 學(xué)習(xí)筆記之一jQuery寫(xiě)法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁(yè)面上寫(xiě)幾個(gè)函數(shù)，基本沒(méi)考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高，所以就研究了下類(lèi)似jQuery的封裝2012-06-06