ajax - 无法通过AJAX动态更改复选框的状态

Question

我试图通过ajax选中复选框，但无法正常工作。我无法更改第一个复选框的状态，只有第二个复选框可以正常工作。有人可以在这里发现错误吗？

$.ajax({
    type:"POST",
    url:"../scripts/domainlist.php?dept="+deptid+"&pro="+proid,
    contentType:"application/json; charset:utf-8",
    dataType:"json",
    success: function(data){
        $('#domainlist').empty();
        $('#domainlist')
        .append("<tr rowspan='2' class='domainname'>
                      <th class='domainname'>Domain Name</th>
                      <th class='domainname'>Is this domain applicable to your organization?</th>
                      <th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>
                 </tr>");
        var index = 0;
        $.each(data,function(i,item){

            var index2=index+1;

            var display_status = "";
            var applicable_status = "";
            if(data[i].applicable == 1){
                applicable_status = "checked";
            }
            if(data[i].display == 1){
                display_status = "checked";
            }

            $('#domainlist')
        .append("<tr class='domainname'>
                    <td class='domainname'>
                       <a href='setcategoryapplicability.php?dom="+ data[i].domid +"'>"+ data[i].domname +"</a>
                    </td>
                    <td>
                         <input id='toggle-"+index+"' name='applicable["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+applicable_status+">
                             <label for='toggle-"+index+"]'></label>
                   </td>
                   <td>
                        <input id='toggle-"+index2+"' name='display["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+display_status+">
                             <label for='toggle-"+index2+"'></label>
                 </td>
               </tr>");
            index = index +2;
        });
    },
    complete: function(){
    }
});

Answer 1

确认数据正确

如果您的数据按预期输入，则该应用程序应该可以工作。

如果您在使用第一个复选框时遇到问题，则data[i].applicable可能不是预期的格式。

请参阅下面的示例，在该示例中，我以期望的格式（根据我对代码的读取，因为您未提供示例数据对象）来传递硬编码数据：

var data = [
    {
        "domid": "domid_A",
        "domname": "Domain Name A",
        "applicable": 0,
        "display": 0
    },
    {
        "domid": "domid_B",
        "domname": "Domain Name B",
        "applicable": 1,
        "display": 1
    }
];
var index = 0;

$('#domainlist').empty();
$('#domainlist').append(
    "<tr rowspan='2' class='domainname'>" +
    "    <th class='domainname'>Domain Name</th>" +
    "    <th class='domainname'>Is this domain applicable to your organization?</th>" + 
    "    <th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>" +
    "</tr>"
);
$.each(data, function (i, item) {
    
    var index2 = index + 1;
    var display_status = "";
    var applicable_status = "";

    if (data[i].applicable == 1) {
        applicable_status = "checked";
    }

    if (data[i].display == 1) {
        display_status = "checked";
    }
    
    $('#domainlist').append(
        "<tr class='domainname'>" +
        "    <td class='domainname'>" +
        "        <a href='setcategoryapplicability.php?dom=" + data[i].domid + "'>" + data[i].domname + "</a>" +
        "    </td>" +
        "    <td>" +
        "        <input id='toggle-" + index + "' name='applicable[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + applicable_status + ">" +
        "        <label for='toggle-" + index + "]'></label>" + 
        "    </td>" +
        "    <td>" +
        "        <input id='toggle-" + index2 + "' name='display[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + display_status + ">" +
        "        <label for='toggle-" + index2 + "'></label>" +
        "    </td>" +
        "</tr>"
    );
    index = index + 2;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="domainlist"></table>