How to enable and disable button using javascript
Question
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
3 answers
solution1
2 ACCPTED 2018-06-15 05:29:45
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>
solution2
0 2018-06-15 05:40:14
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>
solution3
0 2018-06-15 06:34:37
Try:
<!-- To disable button -->
$('#ElememtId').prop("disabled",true)
and
<!-- To enable button -->
$('#ElememtId').prop("disabled",false)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to programmatically enable and disable a button using javascript
How to enable and disable back button using JavaScript
Enable/disable button using javascript
How to Disable and Enable a button with Javascript
How enable and disable a button with javascript?
How to disable and enable button in JavaScript
How enable & disable some javascript function using radio button
problem with enable/disable button using javascript
Disable/Enable "save-button" using JavaScript
Radio button to Enable Disable using Javascript
Related Tags