JQuery - check checkboxes in table

Question

I'm populating rows in a table from an array. Each row has a checkbox, which I want to be checked depending on certain conditions.

So after populating each row, I'm trying to check the checkbox, but using this doesn't seem to check it:

if(invoices[i].paid == 'yes'){
    $('.filterPaid').prop('checked', false);
}else{
    $('.filterPaid').prop('checked', true);
}

This is the code:

var invoices = {% raw json_encode(invoices) %};
//console.log(invoices);
var addRow = '';
for(var i = 0; i < invoices.length; i++){
    //alert(invoices[i].invoiceDueYear);

    var date = new Date(invoices[i].invoiceDueYear,invoices[i].invoiceDueMonth,invoices[i].invoiceDueDay);
    var d = date.getDate();
    var month = new Array();
    month[0] = "Jan";
    month[1] = "Feb";
    month[2] = "Mar";
    month[3] = "Apr";
    month[4] = "May";
    month[5] = "Jun";
    month[6] = "Jul";
    month[7] = "Aug";
    month[8] = "Sep";
    month[9] = "Oct";
    month[10] = "Nov";
    month[11] = "Dec";
    var m = month[date.getMonth()]; 

    var y = date.getFullYear();

    var inv = pad(invoices[i].invoiceNo,9,3);

    if(invoices[i].currency === 'GB'){
        var currency = '&#163;';
    }else if(invoices[i].currency === 'US'){
        var currency = '&#36;';
    }else{
        var currency = '&#8364;';
    }

    addRow += '<tr><td><input type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';

    if(invoices[i].paid == 'yes'){
        $('.filterPaid').prop('checked', false);
    }else{
        $('.filterPaid').prop('checked', true);
    }
}
$('#invoiceTable tr').first().after(addRow);

Why wouldn't it check the checkboxes in this instance?

Answer 1

In your code the checkboxes are only a string when you try to set the checkboxes checked attribute using jQuery. Outside the loop $('#invoiceTable tr').first().after(addRow); inserts the HTML string into the DOM. From that moment on the string is parsed into HTML and you can set attributes on them using code. My recommendation is to insert the checked attribute into the html string you're building.

addRow += '<tr><td><input type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';

if(invoices[i].paid == 'yes'){
    $('.filterPaid').prop('checked', false);
}else{
    $('.filterPaid').prop('checked', true);

Change to this

var attr = "";
if(invoices[i].paid == 'yes'){
     attr = "checked";
}

addRow += '<tr><td><input '+attr+' type="checkbox" class="filterPaid" id="invPaid'+i+'" value="outstanding" name="filterTasks[]"></td><td class="invoiceView" value="'+invoices[i].uid+'"><a href="#">' + inv + '</a></td><td>' + invoices[i].creditorName + '</td><td>' + currency + '' + invoices[i].balance + '</td><td>' + d + ' '+ m +' '+y+'</td></tr>';