我们正在使用 MVC 弹出模型，其中有两个文本框 SSN 号码和 DOB(出生日期)，我正在为 DOB 使用 datepicker 日历，它是只读文本框，对于 SSN 号码，我手动将号码放在文本中盒子。当 SSN 号码和 DOB 都正确时，我已经编写了以下代码以启用下一步按钮。但是下面的代码无法正常工作，首先我输入了 SSN 号码，当我使用日历选择 DOB 时，下一步按钮未启用，请帮我解决这个问题。
$("#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");
}
});
谢谢， 桑迪普
最佳答案
在 jquery 中，这是禁用按钮的方式
$('#id_of_the_button').prop('disabled', true);
启用按钮
$('#pc_add').prop('disabled', false);
在你的 html 中，按钮应该是这样的
<button id="id_of_the_button"> text of the button </button>
在这里回答你的问题你应该如何实现你的html文件
<!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>
关于javascript - 如何使用javascript启用和禁用按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50869498/