我有以下表格。在完成所有字段之前，“继续”按钮将被禁用。我已经在 jfiddle 上试过了，表格按预期工作，但在实际的在线 .html 文件上它不起作用。例如，即使字段已完成，按钮也始终处于禁用状态，有什么想法吗？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="ue1.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="UE.js"></script>
<script type="text/javascript" language="javascript">
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
</script>
</head>
<body>
<header id="header">
<div class="header1">
Accessibility Tools | Skip to Navigation | Skip to Content | Website A-Z | Sitemap | Report a Problem | Help
</div>
</header>
<div id="mainwrapper">
<div id="contentwrapper">
<div id="content">
<div id="bulogo">
<img src="bulogo.png" alt="BU Logo" style="width:220px;height:128px;">
<div id="bulogo1">
Payment Gateway
</div>
</div>
<p>
<div id="processorder">
Process Order
</div>
<div id="viewordersummary">
View Order Summary
</div>
<div id="lefthelp">
Help
</div>
<div id="progressbar">
<img src="PersonalProgressBar.png" alt="This is your progress">
</div>
<form action="ue.html" method="post" id="nameform">
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*:</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" id="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
</div>
<input type="submit" id="continue" disabled value="Continue"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
最佳答案
将您的代码包装在 document.ready 中可能会有所帮助。
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
如果是 WordPress，请注意您不能将 $ 用于 jQuery。您必须改为使用 jQuery('body input')，或者将您的代码包装在以下内容中:
$(function(){
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
})(jQuery);
您是否在控制台中看到任何错误？
关于javascript - 禁用表单按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36486289/