0
    <lightning-input value={value}  class="slds-p-horizontal--xx-small" variant="label-hidden"></lightning-input>
    <lightning-input type="number" name="input7" value={value} class="slds-p-horizontal--xx-small"  variant="label-hidden" step="any"></lightning-input>
    <lightning-input type="number" value={value} class="slds-p-horizontal--xx-small" variant="label-hidden"></lightning-input>
    <lightning-input value={value} type='date' variant="label-hidden" class="slds-p-horizontal--xx-small"></lightning-input>
    <lightning-combobox class="slds-p-horizontal--xx-small"options={options} value={value} variant="label-hidden"></lightning-combobox>
    <lightning-textarea name={record.id} class="slds-p-horizontal--xx-small" variant="label-hidden"></lightning-textarea>

I want to make all the above elements read-only on button click. In which way we would dynamically make the input element read-only/disabled.

Thanks in advance.

2

They all have a read-only attribute you can bind to the same variable (if all need to be set together). You can see that defined in their specifications within documentation.

<lightning-input 
    value={value}  
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly} //set to true within button click handler
></lightning-input>
<lightning-input 
    type="number" 
    name="input7" 
    value={value} 
    class="slds-p-horizontal--xx-small"  
    variant="label-hidden" 
    step="any"
    read-only={inputReadOnly}
></lightning-input>
<lightning-input 
    type="number" value={value} 
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-input>
<lightning-input 
    value={value} 
    type='date' 
    variant="label-hidden" 
    class="slds-p-horizontal--xx-small"
    read-only={inputReadOnly}
></lightning-input>
 <lightning-combobox 
    class="slds-p-horizontal--xx-small"
    options={options} 
    value={value} 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-combobox>
<lightning-textarea 
    name={record.id} 
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-textarea>

In your button click handler, set the variable to true to make all inputs read-only.

handleButtonClick(){
    this.inputReadOnly = true;
    //do other things as needed
}
1
  • Yup !! I overlooked the documentation. Thanks Kris for your quick response!!
    – sfMon
    Aug 23 '21 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.