Checkbox checked property is not working in JQUERY Datatable column

Question

I have a jquery datatable in which first coloumn is checkboxes.In the application while editing ,i need to display the selected items as thier checkbox checked.I am getting the data from ajax response.Data binding is working fine,but the checked attribute isn't.

here is my code:

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 code:

<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>

here is the json response:

[
  {
    "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
  }
]

In the response only Activity 5 is selected.But in the UI all the checkboxes are getting selected.

Screenshot:

In this case only Activity 5 should be checked.

Answer 1

Try this:

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();

What you are basically doing is writing checked=true or checked=false in your HTML from the JSON response. The valid HTML code is checked="checked" for a checked checkbox, the unchecked checkboxes do not have the checked attribute at all.