I have tried to disable checkbox like
var t8 =283.50;
var t9 = 283.50;
if (t8 == t9) {
$('.checkBoxClass:input([value=' + t11 + ')').attr('disabled', true);
}
Condition is working but the checkbox is not getting disabled.
trtoggle +=
"<tr><td class='invoicedate_check'>" + t6 +
"</td><td class='invoiceno_check'>" + t7 +
"</td><td style='text-align: right;' class='invoiceamt_check'>" + t8 +
"</td><td style='text-align: right;' class=''>" + t9 +
"</td><td style='text-align: right;' class=''>" + balance +
"</td><td class='checkBoxtd" + t11 +
"'><input type='checkbox' class='checkBoxClass checkBoxClassse" + t11 +
"' id='checkbox"+t11+"' name='myTextEditBox[]' value='" + t11 +
"'/> Select</td></tr>";
$(".tableinvoice_proj").last().append(trtoggle);
Here is my full function code:
$('#projectname_add').on('change', function() {
$(".projectname_add_TextBox").val($(".projectname_add option:selected").html());
var projectname_add = $('.projectname_add').val();
var getID_comp = $('#getID_comp').val();
//alert(getID_comp)
$('#tableproject').find('tbody').remove();
$('#tableinvoice_proj').find('tbody').remove();
$('#myprojdisplay_new').find('tbody').remove();
$('#myprojdisplaylatest').find('tbody').remove();
if(projectname_add !== "list_all_projects"){
$.ajax({
url: base_url + "index.php/welcome/list_a_projects_invoice/",
// url: base_url + "index.php/welcome/invoice_allList/",
type: "POST",
data: {
"id": projectname_add
},
success: function(data) {
var new_data = JSON.parse(data);
console.log(new_data)
if(new_data == "No Records Found"){ //no invoice for this project
$('#myprojdisplay_new').hide();
$('#tableproject').hide();
$('#myprojdisplaylatest').hide();
}else{
$('#myprojdisplay_new').show();
$('#myprojdisplaylatest').show();
$('#tableproject').show();
}
for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
var sl = i +1;
//alert(t6)
var t1 = new_data.projectinvoicesection[i]['parent'].project_amount;
var t2 = new_data.projectinvoicesection[i]['parent'].particulars;
var t3 = new_data.projectinvoicesection[i]['parent'].project_ID;
var t4 = new_data.projectinvoicesection[i]['parent'].project_title;
var t5 = new_data.projectinvoicesection[i]['parent'].type;
var t56 = new_data.projectinvoicesection[i]['parent'].period_type;
var object = new_data.projectinvoicesection[i]['child'];
var tr = "<tr data-toggle='collapse' data-target='#demo" + t3 + "' style='background-color: #BBDDDD;color: black;' class='accordion-toggle'><td>"+ sl+"</td><td>"+ t4+"</td><td style='text-align: right;'>"+t1+"</td><td style='white-space: nowrap;'>" + t5 + " " + t56 + "</td><td><button class='open-button-project-edit btn' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#exampleModal_2' onclick='openForm3(" + t3 + ")' style='color: #fff;background-color: #398439;border-color: #255625;'>EDIT</button></td></tr><tr><td colspan='6' class='hiddenRow'><div class='accordian-bodyproj collapse' id='demo" + t3 + "'> <table id='tableinvoice_proj' class='tableinvoice_proj' style='font-size: 14px; border-collapse:collapse;width: 745px; table-layout: fixed;'><thead style='background-color: #86af49;'><tr><th>Invoice Date</th><th>Invoice Number</th><th>Invoice Amount</th><th>Received Amount</th><th>Balance</th><th>Generate Receipt</th></tr></thead><tbody></tbody></table>";
$("#tableproject").append(tr);
$("#tableproject").append('</div></td></tr>');
if( !object || object.length < 1)
{
var trtoggle = `<tr ><td style='text-align:center;' colspan='6' > No records found!</td></tr>`;
} else
{
var trtoggle = '';
for (var property in object) {
var t6 = format(object[property].invoice_date);
var t7 = object[property].invoice_no;
var t8 = object[property].invoice_amount;
//var t9 = object[property].received_Amt;
var t9 = object[property].totalreceiptamt; //received amount
var t11 = object[property].invoice_ID;
var t10 = object[property].proje_ID; //invoice table's project id
if (t9 == '0.00'){
var receiveornot = 'Yet to receive';
var balance = object[property].invoice_amount;
}
else{
var receiveornot = object[property].totalreceiptamt;
var balance = parseFloat(object[property].invoice_amount - object[property].totalreceiptamt).toFixed(2);
}
// trtoggle += "<tr><td class='invoicedate_check'>" + t6 + "</td><td class='invoiceno_check'>" + t7 + "</td><td style='text-align: right;' class='invoiceamt_check'>" + t8 + "</td><td style='text-align: right;' class=''>" + t9 + "</td><td style='text-align: right;' class=''>" + balance + "</td><td class='checkBoxtd" + t11 + "'><input type='checkbox' class='checkBoxClass checkBoxClassse" + t11 + "' id='checkbox"+t11+"' name='myTextEditBox[]' value='" + t11 + "'/> Select</td></tr>";
trtoggle +=
"<tr><td class='invoicedate_check'>" + t6 +
"</td><td class='invoiceno_check'>" + t7 +
"</td><td style='text-align: right;' class='invoiceamt_check'>" + t8 +
"</td><td style='text-align: right;' class=''>" + t9 +
"</td><td style='text-align: right;' class=''>" + balance +
"</td><td class='checkBoxtd" + t11 +
"'><input type='checkbox' class='checkBoxClass checkBoxClassse" + t11 +
"' id='checkbox"+t11+"' name='myTextEditBox[]' value='" + t11 +
"'/> Select</td></tr>";
if (t8 == t9) {
console.log("---");
// console.log($('.checkBoxClass:input([value=' + t11 + '])'));
$('.checkBoxClass:input([value=' + t11 + '])').prop('disabled', true);
}
}
}
$(".tableinvoice_proj").last().append(trtoggle);
}
}
});
}
})
The above is the code when dropdown option changed, two tables are displaying.one table for project details inside project details invoice html table will come.Here i need to disable the checkbox based on the if condition
.prop('disabled', true), if it's not working try toconsole.log($('.checkBoxClass:input([value=' + t11 + ')'))and see if that exists or do you have a problem with your selector.