function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
krios demokrios demo 

How to disable the Lightning Button which is dynamically created In LWC

I have a below scenario in LWC

I have iterated the Lightning button with Label "Schedule" using for:each in table. When there are three product then  buttons are generated for each product. when I click on first Schedule Button which index is "0" then when i create the record successfully and back to schedule for next product then previously clicked "Schedule" button which having "0" index should be disabled. 

HTML:

<template if:true={BaseTable}>
        <table>
            <thead>
                <tr style="text-align: center;">
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Product Name </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > Indent Quantity </th>
<th style=" text-align: center; padding: 6px; border: 1px solid;" > #### </th>
</tr>
     </thead>
            <tbody>
<template for:each={OrderItemData} for:item="item" for:index="index" >
<tr key={item.OrderId}>
<td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Product2.Description} </td>
< td style="text-align: center; padding: 6px; border: 1px solid;" > {item.Quantity}</td>
<td style="padding: 6px; border: 1px solid"> 
      <lightning-button class="slds-m-left_xx-small slds-align_absolute-center" variant="brand" label="Schedule" title="ScheduleProduct" onclick={handleProductSchedule} data-id={item.Product2Id}
data-name={item.Product2.Description}                                          data-qty = {item.Quantity} disable = {DisableSchedule}               
data-index = {index}></lightning-button></td>
                    </tr>
                </template>
            </tbody>
        </table>
        </template>
=====================================================
JS:
handleProductSchedule(event) {
        this.productId = event.target.dataset.id;
        this.productName = event.target.dataset.name;
        this.productQty = event.target.dataset.qty;
        const buttonindex = event.target.dataset.index;
        event.target.disabled = true;
        
                
        this.BaseTable = false;
        this.ScheduleTable = true;
        this.CreateScheduleEnabled = false;
        
        console.log('Product ID:', this.productId);
        console.log('Product Name:', this.productName);
        console.log('Ordered Quantity :', this.productQty);
        console.log("Current Products Button Index ==> ", buttonindex)
    }
    handlebackfunction() {
        this.BaseTable = true;
        this.ScheduleTable = false;
    }

handleCreateSchedules(event){
        var schQty = 0;
        // Addition of all Schedule Quantity
        for(var i = 0; i < this.itemList.length; i++){
            schQty = parseInt(schQty) + parseInt(this.template.querySelector('[data-index = "' + i + '"]').value);
        }
        console.log('schQty', schQty);
        console.log('productQty', this.productQty);
        // checking schedule and indent Quantity same or not
        if (schQty == this.productQty) {
            console.log('Schedule Quantity Matches to Indent Quantity');
            const scheduleRecords = [];
            // Get all input data using querrySelectorAll
            const inputFields = this.template.querySelectorAll('[data-inputs]');
            let hasNullValues = false; 
            inputFields.forEach((input) => {
                const ProdName = this.productName;
                const ProdId = this.productId;
                const indexing = input.dataset.index;
                const fieldName = input.name;
                const fieldValue = input.value;
                // Check if Value of any field is Null
                if (fieldValue === null || fieldValue === '') {
                    this.showToast('Error', 'Please enter a value for ' + fieldName, 'error');
                    hasNullValues = true;
                } else {
                    const record = { indexing: indexing, ProdName: ProdName, ProdId: ProdId,  [fieldName]: fieldValue};
                    // Check if a record with the same indexing already exists in scheduleRecords
                    const existingRecord = scheduleRecords.find((rec) => rec.indexing === indexing);
                    if (existingRecord) {
                        // Merge the new field and value into the existing record
                        existingRecord[fieldName] = fieldValue;
                    } else {
                        scheduleRecords.push(record);
                    }
                }
            });
            if (!hasNullValues) {
                console.log('scheduleRecords', scheduleRecords);
            
                console.log("Schedule Creation Function before call");
                // Call Save Method from Apex
                SaveIndentSchedules({scheduleRecords, OrdId : this.recordId})
                .then(result =>{
                    console.log('Record Saved Successfully');
                    console.log(result);
                    this.showToast('Success', 'Schedule Records Saved Successfully...', 'success');
                    this.CreateScheduleEnabled = true;
                    this.refreshApex(this.wiredScheduleData);
                    
                })
                .catch(error => {
                    console.error('Error : Error Occured to Save The Records');
                })
            }
            
        } else if (schQty > this.productQty){
            this.showToast('Error', 'Schedule Quantity Exceeds Indent Quantity', 'Error');
        }
        else {
            this.showToast('Error', 'Schedule Quantity Does Not Match Indent Quantity', 'Error');
            console.error('Error: schQty does not equal productQty');
        }
    }

 
AshwiniAshwini (Salesforce Developers)