How to disabled all of input field values dynamically based on button click Uses of foreach loop in javascript in Lightning Web component Salesforce – LWC

[vijayk3327]

In this post we are going to learn about How to disabled all of input field values dynamically based on button click Uses of ‘foreach loop’ in javascript in Salesforce Lightning Web component – LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : disableInputLwc.html

`

How to disable the input fields on button click in LWC

        <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="Name" ></lightning-input>
            </div>
          </div>

          <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="Email" ></lightning-input>
            </div>
          </div>

          <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="Phone" ></lightning-input>
            </div>
          </div>

          <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="City" ></lightning-input>
            </div>
          </div>

          <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="Country" ></lightning-input>
            </div>
          </div>

          <div class="slds-form-element slds-m-bottom--small">               
            <div class="slds-form-element__control">
                <lightning-input type="text" label="Pincode" ></lightning-input>
            </div>
          </div>

        
          <div class="slds-form-element" style="text-align: center;">
            <lightning-button label="Disable Input" variant="brand" onclick={disableHandleClick}></lightning-button>
          </div>
        
  </div>

`

Step 2:- Create Lightning Web Component : disableInputLwc.js

` import { LightningElement } from 'lwc';

export default class DisableInputLwc extends LightningElement {
disableHandleClick(){
this.template.querySelectorAll('lightning-input').forEach(item=>{
item.disabled=true;

    })
}

}`

Step 3:- Create Lightning Web Component : disableInputLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Application : disableInputLwcApp.app

<aura:application extends="force:slds"> <c:disableInputLwc/> </aura:application>

→ Get source code live demo link:-