function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Arpitha MArpitha M 

how do i enable a disabled button

test.html:

In this html I have a input function and a lightining-button component
The code is as below.

<template>
    
            <lightning-button-group style="float:right;">
            <input type="number" value="" style="width:60px;float:right;border:1px solid grey;"></input>        
                <lightning-button label="Add"  disabled></lightning-button>
                <lightning-button-icon icon-name="utility:delete" variant="border-filled" alternative-text="Delete"></lightning-button-icon>
            </lightning-button-group><br/><br/>
            
</template>

test.js:

Here based on the input value in the html code I need to enable the disabled Add button in the html code.
The condition is if input value is greater than 0 it should get enabled.
the code is as below:

import { LightningElement } from 'lwc';
export default class ButtonGroupBasic extends LightningElement {
    renderedCallback() {
        let inp = this.template.querySelector('input');
        let test = this.template.querySelector('lightning-button');
        if(inp > 0){
            test.disabled = false;
        }
         
    }
}

Please let me know where I am going wrong in this code.
Best Answer chosen by Arpitha M
Arpitha MArpitha M
test.html

<template>
    
            <lightning-button-group style="float:right;">
            <input type="number" value="" style="width:60px;float:right;border:1px solid grey;" onchange= {handleChange} ></input>        
                <lightning-button label="Add" disabled={Buttontrue}></lightning-button>
                <lightning-button-icon icon-name="utility:delete" variant="border-filled" alternative-text="Delete" ></lightning-button-icon>
            </lightning-button-group><br/><br/>
            
</template>

test.js

/* eslint-disable no-undef */
/* eslint-disable no-console */
import { LightningElement, track} from 'lwc';


export default class ButtonGroupBasic extends LightningElement {
    @track inputvalue;
    @track Buttontrue=true;
    handleChange(event){
        this.inputvalue = event.target.value;
        console.log('++++',this.inputvalue);
        if(this.inputvalue > 0){
            this.Buttontrue=false;
        }
    }
    
    
    
}