How to enable and disable button using javascript

button disabled javascript
how to disable a button in javascript based on condition
javascript disable button onclick
how to disable a button in jquery
how to disable a button in html
javascript disable button after click
how to enable textbox in javascript on button click
button disabled css

We are using MVC popup model where having two text box SSN number and DOB(Date of birth), i am using datepicker calendar for DOB and it is read only text box, for SSN number i am manually put the number in text box. i have written the below code to enable next button when SSN number and DOB both are correct. But below code is not working properly, First i put the SSN number and When i Select the DOB using calendar, next button is not enable, Please help me to resolve this issue.

$("#SocialSecurityNumber").blur(function () {

        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#SocialSecurityNumber").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });


    $("#DateofBirth").blur(function () {

        if ($("#DateofBirth").val() !='' && $("#SocialSecurityNumber").val().length == 11) {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#DateofBirth").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }

        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }
    });

Thanks, Sandeep


in jquery this is how you should disable a button

$('#id_of_the_button').prop('disabled', true);

to enable the button

$('#pc_add').prop('disabled', false);

in your html the button should be like this

<button id="id_of_the_button"> text of the button </button>

To answer your question here how you should implement your html file

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script>
$(document).ready(function(){
     $("#SocialSecurityNumber").keyup(function() {
     if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").prop('disabled', false);
      } else {
        $("#nextSubmit").prop('disabled', true);
      }
    });

    $('#DateofBirth').change(function() {
         if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
         $("#nextSubmit").prop('disabled', false);
        }else {
            $("#nextSubmit").prop('disabled', true);
        }
    });
});


</script>
</head>
<body>

<h2>This is a heading</h2>
  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>

</body>

</html>

HTML DOM Button disabled Property, Using Javascript. Disabling a html button document.getElementById("Button").​disabled = true;. Enabling a html button document. An HTML button is one of the few elements that has its own state. Along with almost all the form controls. One common thing that’s needed is to disable / enable the button programmatically using JavaScript. For example you want to only enable the button when a text input element is filled.


Instead of using blur and keyup events, use the change event on input.

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>
  <script>
    $("#SocialSecurityNumber").change(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });


    $("#DateofBirth").change(function() {

      if ($("#DateofBirth").val() != '' && $("#SocialSecurityNumber").val().length == 11) {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });

    $("#DateofBirth").keyup(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }
    });
  </script>

  <body>

Disabling and enabling a html input button, Here in this post I've shared a simple example showing how to disable or enable a submit button based on certain condition. JavaScript - Disable Button after Click using JavaScript Function In this code snippet we will learn how to disable a button on click event. In this example there will be button and it will be disabled after click on the button.


Try:

<!-- To disable button -->
$('#ElememtId').prop("disabled",true)

and

<!-- To enable button -->
$('#ElememtId').prop("disabled",false)

⇒ How to enable JavaScript || For all Browsers || Easy & FREE guides!, All you need to do is get the element by id and set its disabled property to true or false. You can do that when a user clicks on some button by calling a JavaScript​  Enable/Disable button on checkbox cleck. disable/enable button via javascript. disable button and then enable. To enable and disable asp.net linkbutton using javascript via php. disable and enable button in a partial page of a view. how to Enable/disable Button based on text in textboxes in asp.net using javascript.


Disable or Enable Submit Button using JavaScript disabled Property, You can find/search any element using javascript like this and set their attribute. Hide Copy Code. document.getElementById('button').disabled  how to Disable enable submit button using javascript simora How can I have the submit button disabled by default, an enable it only if 2 specific input box values match. or If a specific form field is => than some value in another form field or hidden field, the Submit button is re-enabled.


How to enable/disable an element using jQuery and JavaScript?, We do this by simply adding the following line into the header of the page. <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'><  I’ve read that you can disable (make physically unclickable) an HTML button simply by appending disable to its tag, but not as an attribute, as follows: Since this setting is not an attribute, how can I add this in dynamically via JavaScript to disable a button that was previously enabled? Some attributes are defined as boolean, which means


[Solved] enable and disable buttons using javascript, The following example demonstrates this by disabling the submit button on an empty input, and enabling it when the input is supplied. JS; HTML. JS. The disabled property sets or returns whether a button is disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. This property reflects the HTML disabled attribute.