如何使用JavaScript启用和禁用按钮
[英]How to enable and disable button using javascript
问题描述
我们使用的是MVC弹出模型，其中有两个文本框SSN编号和DOB（出生日期），我对DOB使用日期选择器日历，并且它是只读文本框，对于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");
}
});
谢谢，桑迪普
3 个解决方案
解决方案1
2 已采纳 2018-06-15 05:29:45
在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>
解决方案2
0 2018-06-15 05:40:14
与其使用blur and keyup事件， blur and keyup对输入使用change事件。
<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>
解决方案3
0 2018-06-15 06:34:37
尝试：
<!-- To disable button -->
$('#ElememtId').prop("disabled",true)
和
<!-- To enable button -->
$('#ElememtId').prop("disabled",false)
如何使用javascript以编程方式启用和禁用按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.