jeudi 26 août 2021

How to disable checkbox if condition is true using jQuery?

console.logI 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




Aucun commentaire:

Enregistrer un commentaire