javascript - 复选框选中的属性在 JQUERY 数据表列中不起作用

Question

我有一个 jquery 数据表，其中第一列是 checkboxes。在应用程序中编辑时，我需要将所选项目显示为他们的 checkbox checked。我正在从 ajax 响应 获取数据。数据绑定(bind)工作正常，但 checked 属性不是。

这是我的代码:

custAct.success = function (status) {
       try {
               var response = JSON.parse(status);
               activityCust.clear().draw();

  for (var i = 0; i < response.length - 1 ; i++) 
      {
activityCust.row.add({ 0: '<input class="checkboxCust" checked=' + response[i].IsSelected + '  value="' + response[i].ID + '" data-id="' + response[i].ID + '" type="checkbox" />', 1: response[i].Name, 2: response[i].Hours }).draw();    
      }

catch(ex)
{
}

HTML代码:

<table class="gridTableActivityCust hover">
                            <thead>
                                <tr>
                                    <th>Select</th>
                                    <th>Activity Name</th>
                                    <th>Hours</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.Activities)
                                {
                                    <tr data-id="@item.ActId">
                                        <td>
                                            <input class='checkboxCust' disabled="@item.Enabled" checked="@item.IsSelected" value="@item.ActId" data-id="@item.ActId" type='checkbox' />
                                        </td>
                                        <td>
                                            @item.ActivityName
                                        </td>
                                        <td>
                                            @item.Hours
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>

这是 json 响应:

[
  {
    "ID": 1,
    "Name": "Activity 1",
    "Description": "nc",
    "Hours": 2,
    "Remove": false,
    "Active": false,
    "IsSelected": false,
    "Disabled": true
  },
  {
    "ID": 2,
    "Name": "Activity 2",
    "Description": "lkn",
    "Hours": 3,
    "Remove": false,
    "Active": true,
    "IsSelected": false,
    "Disabled": false
  },
  {
    "ID": 3,
    "Name": "Activity 3",
    "Description": "lkk",
    "Hours": 2,
    "Remove": false,
    "Active": false,
    "IsSelected": false,
    "Disabled": true
  },
  {
    "ID": 4,
    "Name": "Activity 4",
    "Description": "kjhj",
    "Hours": 3,
    "Remove": false,
    "Active": true,
    "IsSelected": false,
    "Disabled": false
  },
  {
    "ID": 5,
    "Name": "Activity 5",
    "Description": "mn",
    "Hours": 7,
    "Remove": false,
    "Active": true,
    "IsSelected": true,
    "Disabled": false
  },
  {
    "ID": 6,
    "Name": "Activity 6",
    "Description": "kj",
    "Hours": 5,
    "Remove": false,
    "Active": true,
    "IsSelected": false,
    "Disabled": false
  },
  {
    "ID": 7,
    "Name": "Activity 7",
    "Description": "hj",
    "Hours": 8,
    "Remove": false,
    "Active": false,
    "IsSelected": false,
    "Disabled": true
  },
  {
    "ID": 8,
    "Name": "gdfg",
    "Description": "dgdfg",
    "Hours": 4.4,
    "Remove": false,
    "Active": true,
    "IsSelected": false,
    "Disabled": false
  }
]

在响应中，只有 Activity 5 被选中。但在 UI 中，所有复选框都被选中。

截图:

在这种情况下，只应检查事件 5。

Answer 1

试试这个:

activityCust.row.add({ 0: '<input class="checkboxCust" ' + response[i].IsSelected? checked="checked":""+'  value="' + response[i].ID + '" data-id="' + response[i].ID + '" type="checkbox" />', 1: response[i].Name, 2: response[i].Hours }).draw();

您基本上所做的是根据 JSON 响应在您的 HTML 中编写 checked=true 或 checked=false。对于选中的复选框，有效的 HTML 代码是 checked="checked"，未选中的复选框根本没有 checked 属性。