javascript - 如何在可以添加、编辑和删除的动态表上保留复选框值？

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 属性 来保留复选框的状态。

如果 checked 属性存在，复选框将被选中，在未选中的情况下，它将空白。

---

在保存函数中:

改变这个

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>

注意:可能有更多更好的方法来编写您的代码，但在这里我已经指出了您问题的解决方案。