How to enable and disable button based on condition in JavaScript?

how to disable a button in javascript based on condition – Enable or Disable Button based on condition using JavaScript Example with full source code.

Table of Contents Show

how to disable a button in javascript based on condition
How to disable a button in JavaScript based on condition
How to enable/disable an html button based on scenarios?
Related posts:
1. Using jQuery
How do you disable a button based on condition in react JS?
How to disable and enable submit button in JavaScript?
Can you disable a button in JavaScript?
How to disable a button in jQuery based on condition?

how to disable a button in javascript based on condition

Contents

Set button disable property false for disabled it and true for enabled it in JavaScript.

Also Read This 👉 owl carousel vertical slider - How to use owl carousel vertically?

use the disabled attribute

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>

How to disable a button in JavaScript based on condition

index.html

<html>
<body>
    <input type="text" id="txt" onkeyup="EnableDisable(this)" />

    <input type="submit" id="loginButton" disabled value="Submit" />
</body>
<script>
    function EnableDisable(txt) {
        var loginButton = document.getElementById('loginButton');
        if (txt.value != '') {
            loginButton.disabled = false;
        }
        else {
            loginButton.disabled = true;
        }
    }
</script>
</html>

How to enable/disable an html button based on scenarios?

Enable or Disable Button based on condition using JavaScript – Enable the TextBox when TextBox has value and Disable the TextBox when TextBox is empty.

GSTIN Number:
<input type="text" id="txtGSTINNumber" onkeyup="EnableDisable(this)" />
<hr />
<input id="loginButton" type="button" value="Submit" disabled="disabled" />
<script type="text/javascript">
    function EnableDisable(txtGSTINNumber) {

        var loginButton = document.getElementById("loginButton");
 
        if (txtGSTINNumber.value.trim() != "") {
            loginButton.disabled = false;
        } else {
            loginButton.disabled = true;
        }
    };
</script>

I hope you get an idea about how to disable a button in javascript based on condition?.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

css disable button
jquery disable button
input type text disabled – How to disable an input type=text?
How to Disable Submit Button After Click using jQuery?
disable browser back button – disable back button in browser using javascript?
jQuery Disable Button After Click Example
VueJS conditionally Enable Disable button

Also Read This 👉 Jquery Responsive Fancybox Popup Example

This post will discuss how to conditionally enable and disable a submit button in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can use the method to add disabled HTML attribute to the submit button and .removeAttr() method to remove the disabled attribute from it. The value of the disabled HTML attribute indicates whether the element is enabled or disabled.

The following example demonstrates this by disabling the submit button on empty input and enabling it when supplied.

In this article I will explain with an example, how to enable or disable Button based on condition using JavaScript.

This article will illustrate how to enable the Button when text is entered in TextBox and disable the Button when the TextBox is empty using JavaScript.

HTML Markup

The HTML Markup consists of an HTML TextBox and a Button. The HTML Button has been assigned disabled using the disabled attribute.

The TextBox is assigned OnKeyUp event handler. When User inputs a value in TextBox, the EnableDisable JavaScript function gets called.

Passport Number:

<hr />

Enable or Disable Button based on condition using JavaScript

When User inputs a value in TextBox, first the Button is referenced. Then the value of the TextBox is checked.

If the TextBox has value, the Button is enabled and if the TextBox is empty, the Button is disabled using JavaScript.

How do you disable a button based on condition in react JS?

React disable button after click const [disable, setDisable] = React. useState(false); After that, you need to use the disable state value as the value of disabled prop in the <button> element. Finally, add an onClick prop to the <button> element that will set the disable state to true .

How to disable and enable submit button in JavaScript?

The JavaScript disabled property is a boolean property that takes a true or false. Setting the property to true will enable the button (clickable) and setting it false (like bt. disabled = false;) will disable the button (un-clickable).

Can you disable a button in JavaScript?

JavaScript provides many methods to interact with the HTML DOM. We can use them to disable a button. To disable a button in JavaScript, we get its reference and then set its disable property to true .

How to disable a button in jQuery based on condition?

Using jQuery With jQuery, you can use the . attr() method to add disabled HTML attribute to the submit button and . removeAttr() method to remove the disabled attribute from it. The value of the disabled HTML attribute indicates whether the element is enabled or disabled.