Apex Code Development You need to sign in to do that
Don't have an account?
Raghav T How to enable/disable the lightning button in LWC.
Hi,
I have been creating LWC component, and there i have one button called "Submit". So I wanted to make that button disable on the pageload and make it enable again after button click(Another method).
Code:
html=>
checkSubmit=true;
//this is a method on another button.
addRow(event) {
//window.alert("Import Alert!!!");
this.indx++;
this.partsList.push(this.record);
checkSubmit=false;
}
I have been creating LWC component, and there i have one button called "Submit". So I wanted to make that button disable on the pageload and make it enable again after button click(Another method).
Code:
html=>
<lightning-button variant="success" class="slds-m-left_x-small" label="Submit" title="Submit" disabled={checkSubmit}></lightning-button>
js=>checkSubmit=true;
//this is a method on another button.
addRow(event) {
//window.alert("Import Alert!!!");
this.indx++;
this.partsList.push(this.record);
checkSubmit=false;
}
I see you have already added the ‘disabled’ property to the lightning-button tag
Came across these related posts that might help
https://salesforce.stackexchange.com/questions/325596/lwc-only-enable-button-if-options-are-available
https://salesforce.stackexchange.com/questions/315680/how-to-conditionally-disable-the-lwc-standard-datatable-buttons
https://salesforce.stackexchange.com/questions/353141/i-would-like-to-disable-a-custom-button-once-after-clicking-it-in-lwc
Thanks
So here the issue is that after adding this disabled property i am not able to achieve the required solution.
Its actulaly not making button enable onclick of method
HTML:
<template> <article class="slds-card" variant="Narrow" title="Add Parts" icon-name="utility:user"> <div class="slds-box slds-theme_default"> <p class="slds-p-horizontal_small" align="right"> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="No Part Load" title="No Part Load"></lightning-button> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="Import Parts" title="Import Parts" onclick={handleImportClick}></lightning-button> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="Add Part" title="Add Part" icon-name="utility:add" onclick= {addRow}></lightning-button> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="Add Custom Part" title="Add Custom Part"></lightning-button> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="Clear All" title="Clear All"></lightning-button> <lightning-button variant="brand-outline" class="slds-m-left_x-small" label="Remove Selected" title="Remove Selected"></lightning-button> </p> </div> </article> <lightning-card> <div> <article class="slds-card"> <div class="slds-box slds-theme_default"> <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"> <thead> <tr> <th class="" scope="col"> <div class="slds-truncate" title="Index">SR NO</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Material">Material</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="EAV">EAV</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Order Quantity">Order Quantity</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Molex Price">Molex Price</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Target Cost">Target Cost</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Per Unit(1 of 1000)">Per Unit(1 of 1000)</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Resale Price">Resale Price</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Competitor">Competitor</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Accept-Reject">Accept-Reject</div> </th> </tr> </thead> <tbody> <template for:each= {partsList} for:item="item" for:index="indx"> <tr key= {item.Id} class="slds-hint-parent"> <td>{indx}</td> <td> <div class=""> <lightning-input data-id= {indx} value= {item.material}></lightning-input> </div> </td> <td> <lightning-input data-id= {indx} value= {item.EAV}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.orderQuantity}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.molexPrice}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.targetCost}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.perUnit}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.resalePrice}></lightning-input> </td> <td> <lightning-input data-id= {indx} value= {item.competitor}></lightning-input> </td> <td> <!-- <lightning-input type="toggle" data-id= {indx} value= {acceptReject}></lightning-input> --> <label class="slds-checkbox_toggle slds-grid"> <input data-id= {indx} type="checkbox" name="checkbox-toggle-19" value="checkbox-toggle-19" aria-describedby="checkbox-toggle-19" /> <span class="slds-checkbox_faux_container" aria-live="assertive"> <span class="slds-checkbox_faux"></span> <span class="slds-checkbox_on ">Accept</span> <span class="slds-checkbox_off">Reject</span> </span> </label> </td> <!-- <td> <lightning-button-icon icon-name="utility:delete" data-id={indx} alternative-text="Delete" class="slds-m-left_xx-small" onclick={removeRow} title="Delete"></lightning-button-icon> </td> --> </tr> </template> </tbody> </table> </div> </article> <article class="slds-card"> <p class="slds-p-horizontal_small" align="right"> <lightning-button variant="success" class="slds-m-left_x-small" label="Review" title="Review"></lightning-button> <lightning-button disabled={checkSubmit} variant="success" class="slds-m-left_x-small" label="Submit" title="Submit"></lightning-button> </p> </article> </div> </lightning-card> </template>JS:
import { LightningElement, track } from 'lwc'; export default class PartsPDR extends LightningElement { @track partsList = []; @track indx = 0; checkSubmit=true; @track record = [{ material: "", EAV: "", orderQuantity: "", molexPrice: "", targetCost: "", perUnit: "", resalePrice: "", competitor: "", acceptReject: false }]; addRow() { //window.alert("Import Alert!!!"); this.indx++; checkSubmit=false; this.partsList.push(this.record); } handleImportClick() { window.alert("Import Parts Alert!!!"); } }