0

So i have a code in which If I am clicking on radio button once then defined lightning buttons are enabled but if I am clicking on it twice those lightning buttons should be disabled again. I could think of logic if it's length could increase to 2 but it's returning 1 only whenever we are clicking it. Please find the code for your reference.

JS -

Handler of radio button

rowSelectedEvent(event){
    if(event.detail.length > 0){
        console.log('lignth' + event.detail.length);
            console.log('in if '+event.detail[0]);
            this.hideViewButton = false;
            this.hideDismissButton= false;
            this.hideMarkAsCompleteButton=false;

        }
    else{
        console.log('else');
        this.hideViewButton = true;
        this.hideDismissButton = true;
        this.hideMarkAsCompleteButton=true;
        this.selectedRecord=null;
    }
        
}
1
  • This means when the user clicks the first time lightning button then the button is clickable after that the user clicks again the same button then the button makes non-clickable right? Jul 31, 2023 at 8:55

2 Answers 2

0

To toggle the enabled/disabled state of the lightning buttons based on the radio button selection, you can introduce a variable to track the state :

JS:

// Initialize a variable to track the state of the radio button selection
selectedRadioButton = false;

// Handler of radio button
rowSelectedEvent(event) {
    // Toggle the selectedRadioButton variable based on the current state
    this.selectedRadioButton = !this.selectedRadioButton;

    // Set the hideViewButton, hideDismissButton, and hideMarkAsCompleteButton based on the selectedRadioButton value
    if (this.selectedRadioButton) {
        this.hideViewButton = false;
        this.hideDismissButton = false;
        this.hideMarkAsCompleteButton = false;
    } else {
        this.hideViewButton = true;
        this.hideDismissButton = true;
        this.hideMarkAsCompleteButton = true;
        this.selectedRecord = null;
    }
}

In this updated code, we introduce the selectedRadioButton variable, which acts as a toggle for enabling/disabling the lightning buttons. When the radio button is clicked once, the rowSelectedEvent function is called, and it toggles the value of selectedRadioButton. If selectedRadioButton is true, the buttons will be enabled, and if it is false, the buttons will be disabled.

Hope this helps !

0

You could have an instance property clickedOnce = false; which becomes true at the end of the handler, then use it to set the current flags:

clickedOnce = false;

rowSelectedEvent(event) {
    this.hideViewButton = this.clickedOnce;
    this.hideDismissButton = this.clickedOnce;
    this.hideMarkAsCompleteButton = this.clickedOnce;
    if (this.clickedOnce) {
        this.selectedRecord = null;
    }
    this.clickedOnce = true;
}

This way those hideSomething flag will become false only after the first click, but they will turn to true on any subsequent click.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .