以下是工作代码，错误是对已接受答案的评论
如果字段集中的所有项都为空，我会尝试禁用下一个按钮。但我只能让它禁用所有或没有......
引导您完成代码
我们制作表单，用字段集分隔每个区域，然后隐藏除第一个字段集和下一个按钮之外的所有字符
当字段全部填写完毕后，我们再次显示“下一步”按钮
<form method="post" enctype="multipart/form-data" id="signup-form" action="signup.php" class="text-center">
<fieldset>
<legend>Free to join</legend>
<div class="form-group">
<label for="login" class="control-label">Your login:</label>
<input type="text" name="login" id="login">
</div>
<div class="form-group row">
<button type="button" class="btn btn-theme btn-lg btn-next col-sm-4 col-sm-offset-7" data-toggle="2">Next</button>
</div>
</fieldset>
<fieldset>
<legend>Just finish a few steps</legend>
<div class="form-group">
<label for="firstname" class="control-label">Your first name:</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required="required">
</div>
<div class="form-group row">
<button type="button" class="btn btn-theme btn-lg btn-prev col-sm-5 col-sm-offset-1" data-toggle="1">Previous</button>
<button type="button" class="btn btn-theme btn-lg btn-next col-sm-4 col-sm-offset-1" data-toggle="3">Next</button>
</div>
</fieldset>
<fieldset>
<legend>You're almost there</legend>
<div class="form-group">
<label for="dobday" class="control-label">Your birth date:</label>
<div class="row">
<div class="col-sm-4">
<select class="form-control" id="dobday" name="dobday" required="required">
<option value="">Day</option>
<?php
for ($i = 1; $i <= 31; $i++) :
?>
<option value="<?php echo $i; ?>"><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></option>
<?php
endfor;
?>
</select>
</div>
<div class="col-sm-4">
<select class="form-control" id="dobmonth" name="dobmonth" required="required">
<option value="">Month</option>
<?php
for ($i = 1; $i <= 12; $i++) :
?>
<option value="<?php echo $i; ?>"><?php echo date("F", mktime(0, 0, 0, $i, 10)); ?></option>
<?php
endfor;
?>
</select>
</div>
<div class="col-sm-4">
<select class="form-control" id="dobyear" name="dobyear" required="required">
<option value="">Year</option>
<?php
for ($i = (date('Y')-18); $i >= (date('Y')-100); $i--) :
?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php
endfor;
?>
</select>
</div>
</div>
</div>
<div class="form-group row">
<button type="button" class="btn btn-theme btn-lg btn-prev col-sm-5 col-sm-offset-1" data-toggle="2">Previous</button>
<button type="button" class="btn btn-theme btn-lg btn-next col-sm-4 col-sm-offset-1" data-toggle="4">Next</button>
</div>
</fieldset>
<fieldset>
<legend>We promise not to share your personal info</legend>
<div class="form-group">
<label for="email" class="control-label">Your e-mail address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required="required">
</div>
<div class="form-group row">
<button type="button" class="btn btn-theme btn-lg btn-prev col-sm-5 col-sm-offset-1" data-toggle="3">Previous</button>
<button type="button" class="btn btn-theme btn-lg btn-next col-sm-4 col-sm-offset-1" data-toggle="5">Next</button>
</div>
</fieldset>
<fieldset>
<legend>Last step</legend>
<div class="form-group">
<label for="password" class="control-label">Your password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="required">
</div>
<div class="form-group row">
<button type="button" class="btn btn-theme btn-lg btn-prev col-sm-5 col-sm-offset-1" data-toggle="4">Previous</button>
<button type="submit" class="btn btn-theme btn-lg col-sm-4 col-sm-offset-1">Join Free!</button>
</div>
</fieldset>
<div class="steps">
<span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span>
</div>
</form>
和jQuery，我的问题是函数的最后一位
<script>
$('#signup-form').ready(function()
{
$('fieldset').slice(1).hide();
$('.btn-next').attr('disabled', true);
$('.btn-next').click(function()
{
$(this).closest('fieldset').hide().next('fieldset').toggle('slow');
toggleSpan( $(this).attr('data-toggle') );
});
$('.btn-prev').click(function()
{
$(this).closest('fieldset').hide().prev('fieldset').toggle('slow');
toggleSpan( $(this).attr('data-toggle') );
});
function toggleSpan(toggleId)
{
var toggleDone = toggleId - 1;
$('.steps > span').removeClass('active').removeClass('done');
$('.steps > span').slice(toggleDone, toggleId).addClass('active');
$('.steps > span').slice(0, toggleDone).addClass('done');
}
$('fieldset').each(function()
{
$(this).bind('click keyup', function()
{
var empty = false;
$('input, select', this).each(function()
{
if(this.name == 'email')
{
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if( !regex.test(this.value) )
empty = true;
}
if( this.value === '')
empty = true;
});
if(empty)
$('.btn-next', this).attr('disabled', true);
else
$('.btn-next', this).attr('disabled', false);
});
});
});
</script>
答案 0 :(得分：1)
确保click / keyup处理程序中的this确实引用了字段集。我觉得它指的是window。
您可能需要向处理程序添加event参数并使用event.target。