0

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?

1
  • 1
    Because your checkboxes aren't in the dom yet. Commented Jan 18, 2015 at 21:02

1 Answer 1

2

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>';
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.