VVN VVN - 7 months ago 128
Javascript Question

Checkbox checked property is not working in JQUERY Datatable column

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:

img

In this case only Activity 5 should be checked.

Answer

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.