2010年7月8日 星期四

JS Jquery textbox多個輸入框

遇到一個功能...有5個輸入框專寫意見的
如果輸入第一個 第二個才會開啟可輸入 第三個才會顯示出來
如果輸入第二個 第三個才會開啟可輸入 第四個才會顯示出來
以此類推
所以就寫了個Jquery的功能
讓前端來完成這件事情

因為我有寫MASTER所以會多了將ID傳至前端的方法變數 可以省略不看
直接打上你需要的ID給JQUERY就行了

$(function () {
var TextBoxAR1 = "#" + document.getElementById(GetClientId("TextBoxReason1")).id;
var TextBoxAR2 = "#" + document.getElementById(GetClientId("TextBoxReason2")).id;
var TextBoxAR3 = "#" + document.getElementById(GetClientId("TextBoxReason3")).id;
var TextBoxAR4 = "#" + document.getElementById(GetClientId("TextBoxReason4")).id;
var TextBoxAR5 = "#" + document.getElementById(GetClientId("TextBoxReason5")).id;

//1 TO 2
$(TextBoxAR1).keyup(function () {
if ($(TextBoxAR1).val() != "") {
$(TextBoxAR2).attr("disabled", "");
$("#Reason3").show();
}
else {
$(TextBoxAR2).attr("disabled", "disabled");
$("#Reason3").hide();
}
});
//2 TO 3
$(TextBoxAR2).keyup(function () {
if (($(TextBoxAR2).val() != "")) {
$(TextBoxAR3).attr("disabled", "");
$("#Reason4").show();
}
else {
$(TextBoxAR3).attr("disabled", "disabled");
$("#Reason4").hide();
}
});
//3 TO 4
$(TextBoxAR3).keyup(function () {
if (!($(TextBoxAR3).val() == "")) {
$(TextBoxAR4).attr("disabled", "");
$("#Reason5").show();
}
else {
$(TextBoxAR4).attr("disabled", "disabled");
$("#Reason5").hide();
}
});
//4 TO 5
$(TextBoxAR4).keyup(function () {
if (!($(TextBoxAR4).val() == "")) {
$(TextBoxAR5).attr("disabled", "");
}
else {
$(TextBoxAR5).attr("disabled", "disabled");
}
});

沒有留言:

張貼留言