如何在可以添加，編輯和刪除的動態表上保留復選框值？

Question

我想允許用戶編輯他們在表格中輸入的值，但是當我不在可編輯狀態時，我想要禁用一個復選框，並在用戶輸入或編輯它時保持其已選中或未選中狀態。

目前，即使未編輯該復選框並且未保持其已檢查狀態，也可以檢查該復選框。

下面的代碼是我對此的看法。

 $(function () { //Add, Save, Edit and Delete functions code $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); $("#btnAdd").on("click", Add); }); function Add() { $("#tblData tbody").append( "<tr>" + "<td><input type='text' /></td>" + "<td><input type='text' /></td>" + "<td><input type='checkbox' /></td>" + "<td><span class='btnSave'> <a href='#' class='btn btn-link'>Save</a></span>|<span class='btnDelete'> <a href='#' class='btn btn-link'>Delete</a></span></td>" + "</tr>" ); $(".btnSave").on("click", Save); $(".btnDelete").on("click", Delete); }; function Save() { var par = $(this).parent().parent(); //tr var tdName = par.children("td:nth-child(1)"); var tdPhone = par.children("td:nth-child(2)"); var tdEmail = par.children("td:nth-child(3)"); var tdButtons = par.children("td:nth-child(4)"); tdName.html(tdName.children("input[type=text]").val()); tdPhone.html(tdPhone.children("input[type=text]").val()); tdEmail.html(tdEmail.children("input[type=checkbox]").val()); tdButtons.html("<span class='btnEdit'> <a href='#' class='btn btn-link'>Edit</a></span><span class='btnDelete'> <a href='#' class='btn btn-link'>Delete</a></span>"); $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); }; function Edit() { var par = $(this).parent().parent(); //tr var tdName = par.children("td:nth-child(1)"); var tdPhone = par.children("td:nth-child(2)"); var tdEmail = par.children("td:nth-child(3)"); var tdButtons = par.children("td:nth-child(4)"); tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>"); tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>"); tdEmail.html("<input type='checkbox' id='txtEmail' value='" + tdEmail.html() + "'/>"); tdButtons.html("</td><span class='btnSave'> <a href='#' class='btn btn-link'>Save</a></span></td>"); $(".btnSave").on("click", Save); $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); }; function Delete() { var par = $(this).parent().parent(); //tr par.remove(); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnAdd">New</button> <table id="tblData"> <thead> <tr> <th>Name</th> <th>Phone</th> <th>Email</th> <th></th> </tr> </thead> <tbody></tbody> </table> 

Answer 1

您可以通過選中checked attribute來保留checkbox的狀態。

如果檢查的屬性存在，則將選中該復選框，並且在未選中狀態下，它將為空白。

---

在保存功能中 ：

改變這個

tdEmail.html(tdEmail.children("input[type=checkbox]").val());

對此

 var email=(tdEmail.children("input[type=checkbox]").prop('checked')==true)?"checked":"";
 tdEmail.html("<input type='checkbox' disabled  id='txtEmail'" + email + "/>");

---

---

在編輯功能中 ：

改變這個

tdEmail.html("<input type='checkbox' id='txtEmail' value='" + tdEmail.html() + "'/>");

對此

var email=(tdEmail.children("input[type=checkbox]").prop('checked')==true)?"checked":""; 
tdEmail.html("<input type='checkbox' id='txtEmail'" + email + "/>");

---

 $(function () { //Add, Save, Edit and Delete functions code $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); $("#btnAdd").on("click", Add); }); function Add() { $("#tblData tbody").append( "<tr>" + "<td><input type='text' /></td>" + "<td><input type='text' /></td>" + "<td><input type='checkbox' /></td>" + "<td><span class='btnSave'> <a href='#' class='btn btn-link'>Save</a></span>|<span class='btnDelete'> <a href='#' class='btn btn-link'>Delete</a></span></td>" + "</tr>"); $(".btnSave").on("click", Save); $(".btnDelete").on("click", Delete); }; function Save() { var par = $(this).parent().parent(); //tr var tdName = par.children("td:nth-child(1)"); var tdPhone = par.children("td:nth-child(2)"); var tdEmail = par.children("td:nth-child(3)"); var tdButtons = par.children("td:nth-child(4)"); tdName.html(tdName.children("input[type=text]").val()); tdPhone.html(tdPhone.children("input[type=text]").val()); var emailCheck= tdEmail.children("input[type=checkbox]").prop('checked'); //console.log(emailCheck); var email=(emailCheck==true)?"checked":""; //console.log(email); tdEmail.html("<input type='checkbox' disabled id='txtEmail'" + email + "/>"); tdButtons.html("<span class='btnEdit'> <a href='#' class='btn btn-link'>Edit</a></span><span class='btnDelete'> <a href='#' class='btn btn-link'>Delete</a></span>"); $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); }; function Edit() { var par = $(this).parent().parent(); //tr var tdName = par.children("td:nth-child(1)"); var tdPhone = par.children("td:nth-child(2)"); var tdEmail = par.children("td:nth-child(3)"); var tdButtons = par.children("td:nth-child(4)"); var emailCheck= tdEmail.children("input[type=checkbox]").prop('checked'); //console.log(emailCheck); var email=(emailCheck==true)?"checked":""; tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>"); tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>"); tdEmail.html("<input type='checkbox' id='txtEmail'" + email + "/>"); tdButtons.html("</td><span class='btnSave'> <a href='#' class='btn btn-link'>Save</a></span></td>"); $(".btnSave").on("click", Save); $(".btnEdit").on("click", Edit); $(".btnDelete").on("click", Delete); }; function Delete() { var par = $(this).parent().parent(); //tr par.remove(); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnAdd">New</button> <table id="tblData"> <thead> <tr> <th>Name</th> <th>Phone</th> <th>Email</th> <th></th> </tr> </thead> <tbody></tbody> </table> 

注意：可能有更好的方法來編寫代碼，但在這里我已經指出了解決問題的方法。