I have two different buttons on my page. I want them both to be enabled when the page loads, but when a user clicks one I would like to disable the other button. But if they click the other button, I would like that button to disabled as well while enabling the other disabled button. I have been able to disable the button onclick, but I'm having trouble getting the other button to re-enable . Here are the two buttons that I have on the page. They are not in a form, just on the page.
<button onclick="down7913.disabled=false" type="submit" class="positive" name="up7913"><img src="check.png" alt=""/></button>
<button onclick="this.disabled=true" type="submit" class="negative" name="down7913"><img src="cross.png" alt=""/></button>
attr("disabled", false); } else { $('#formButton'). attr("disabled", true); } $("#form2"). toggle(); }); This will disable the opposite button upon clicking, and re-enable it upon clicking again.
To disable a button using only JavaScript you need to set its disabled property to false . For example: element. disabled = true . And to enable a button we would do the opposite by setting the disabled JavaScript property to false .
By default a button's state is enabled in HTML so by setting disabled = true, we have disabled the button for the user. 3. Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.
Check this code, it's in your flavour and working:
Code Snippet -
<button
onclick="this.disabled=true;document.getElementById('down7913').disabled=false;"
type="submit"
class="positive"
name="up7913"
id="up7913"
>
First
</button>
<button
onclick="this.disabled=true;document.getElementById('up7913').disabled=false;"
type="submit"
class="negative"
name="down7913"
id="down7913"
>
Second
</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With