How to make input element read only on button click

Question

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

Answer 1

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
• lightning-textarea
• lightning-combobox

<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
}