[英]How can I enable and disable textbox using jQuery?
今天是個好日子!
一開始,我所有的控件都被禁用。 當我單擊“添加”或“新建”按鈕時,我要啟用文本框和“保存”按鈕,但“編輯和刪除”按鈕除外。 當我單擊“保存”按鈕時,我想禁用所有文本框,並在單擊按鈕的地方啟用“編輯和刪除”按鈕。 當我單擊“編輯”按鈕時
我想啟用文本框,以便可以更新表中的信息。
我正在使用jQuery。 我會顯示所有代碼,因此您可以嘗試一下。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="btnAdd">New</button>
<table id="tblData" border = "1px">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var id = 1;
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);
});
function Add() {
$("#tblData tbody").append(
"<tr>" +
"<td>" + id + "</td>" +
"<td><input type='text'/></td>" +
"<td><input type='text'/></td>" +
"<td><input type='text'/></td>" +
"<td><button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>" +
"</tr>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
id++;
};
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(2)");
var tdPhone = par.children("td:nth-child(3)");
var tdEmail = par.children("td:nth-child(4)");
var tdButtons = par.children("td:nth-child(5)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>");
tdEmail.html("<input type='text' id='txtEmail' value='" + tdEmail.html() + "'/>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Edit() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(2)");
var tdPhone = par.children("td:nth-child(3)");
var tdEmail = par.children("td:nth-child(4)");
var tdButtons = par.children("td:nth-child(5)");
tdName.val("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
tdPhone.val("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>");
tdEmail.val("<input type='text' id='txtEmail' value='" + tdEmail.html() + "'/>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
id = 1;
};
</script>
</body>
</html>
歡迎使用StackOverflow。
要在保存時禁用文本框,請將這些行添加到Save
功能的末尾
tdName.find("input[type=text]").attr('disabled', 'true') tdPhone.find("input[type=text]").attr('disabled', 'true') tdEmail.find("input[type=text]").attr('disabled', 'true')
同樣,要再次啟用它們進行編輯,請將這些行添加到您的Edit
函數中
tdName.find("input[type=text]").removeAttr('disabled') tdPhone.find("input[type=text]").removeAttr('disabled') tdEmail.find("input[type=text]").removeAttr('disabled')
要工作,請查看此Codepen。 https://codepen.io/santu-parashetti/pen/GYNGBd?editors=1010#0
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.