我有一个问题，在我的项目中有一个表格的四个步骤序列，当用户点击Proceed按钮时，它必须进行下一步。但在我的编码中，我可以看到点击步骤2,3,4的数字是可点击的。在用户按下Proceed按钮之前，它不应该是可点击的。当用户进入最后一步4时，前面的步骤不应该是可点击的。
请在下面的图片中找到我的问题所在。
任何人都可以给我一个编码时出错的解决方案。
以下是我的HTML代码：
<div class="row">
<div align="center" class="col-md-12">
<div class="mainform">
<div class="container" style="max-width:600px;">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
<a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
<p><small>Step 1</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p><small>Step 2</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p><small>Step 3</small></p>
</div>
<div class="stepwizard-step col-xs-3">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
<p><small>Step 4</small></p>
</div>
</div>
</div>
<form class="form-horizontal" role="form">
<form role="form">
<div class="panel panel-primary setup-content" id="step-1" style="background: rgb(48, 64, 135);">
<div style="padding: 20px 10px;">
<h3 class="panel-title" style="color: #f2a495;"><strong>Enter Your Details</strong></h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="name" class="control-label col-sm-3 mob">Name</label>
<div class="col-sm-4">
<input type="text" id="name" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="col-sm-4 mob1">
<input id="lname" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
</div>
<div class="form-group">
<label for="mobile" class ="control-label col-sm-3 mob">Mobile</label>
<div class="col-sm-8">
<input type="tele" maxlength="10" required="required" class="form-control" id="number" placeholder="Enter Your Mobile Number">
</div>
</div>
<div class="form-group">
<label for="mobile" class ="control-label col-sm-3 mob">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="number" required="required" placeholder="Enter Your Email">
</div>
</div>
<button class="btn btn-primary nextBtn" type="button" style="width:25% !important;letter-spacing:1px !important;">Proceed</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2" style="background: rgb(48, 64, 135);">
<div style="padding: 20px 10px;">
<h3 class="panel-title" style="color: #f2a495;"><strong>Enter Your Details</strong></h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-3 control-label mob">Gender</label>
<div class="col-sm-6">
<div class="radio-inline">
<label style="color:#fff;">
<input style="color:#fff !important;" type="radio" name="gender" value="male" checked/> Male
</label>
</div>
<div class="radio-inline">
<label style="color:#fff;">
<input style="color:#fff !important;" type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio-inline">
<label style="color:#fff;">
<input style="color:#fff !important;" type="radio" name="gender" value="Other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">DOB</label>
<div class="col-sm-8">
<input name="dob" id="dob" required="required" required="" aria-required="true" class="form-control" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3 mob">Address</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" placeholder="Enter Your Address"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label mob">City</label>
<div class="col-sm-8">
<select class="form-control" id="gender4">
<option value="Select City">Enter Your City Name</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="Ahmednagar">Ahmednagar</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Bhopal">Bhopal</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chennai">Chennai</option>
<option value="Coimbatore">Coimbatore</option>
<option value="Ghaziabad">Ghaziabad</option>
<option value="Greater Noida">Greater Noida</option>
<option value="Gurgaon">Gurgaon</option>
<option value="Howrah">Howrah</option>
<option value="Hubli">Hubli</option>
<option value="Indore">Indore</option>
<option value="Jaipur">Jaipur</option>
<option value="Kolkata">Kolkata</option>
<option value="Lucknow">Lucknow</option>
<option value="Mangalore">Mangalore</option>
<option value="Mohali">Mohali</option>
<option value="Mumbai">Mumbai</option>
<option value="Navi Mumbai">Navi Mumbai</option>
<option value="New Delhi">New Delhi</option>
<option value="Noida">Noida</option>
<option value="Panchkula">Panchkula</option>
<option value="Pune">Pune</option>
<option value="Salem">Salem</option>
<option value="Sangli">Sangli</option>
<option value="Surat">Surat</option>
<option value="Thane">Thane</option>
<option value="Udaipur">Udaipur</option>
<option value="Vadodara">Vadodara</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label mob">PIN</label>
<div class="col-sm-8">
<input type="text" required="required" maxlength="10" class="form-control" name="PIN" placeholder="Enter Your PIN Code"/>
</div>
</div>
<button class="btn btn-primary nextBtn" type="button" style="width:25%;letter-spacing:1px !important;">Proceed</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3" style="background: rgb(48, 64, 135);">
<div style="padding: 20px 10px;">
<h3 class="panel-title" style="color: #f2a495;"><strong>Enter Your Details</strong></h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="address" class ="control-label col-sm-3 mob">Employment Type</label>
<div class="col-sm-8">
<select class="form-control">
<option>Employment Type</option>
<option name="option" value="Salaried">Salaried</option>
<option name="option" value="Self Employed">Self Employed</option>
</select>
</div>
</div>
<div class="form-group">
<label for="address" class ="control-label col-sm-3 mob">PAN Card Number</label>
<div class="col-sm-8">
<input type="address" class="form-control" id="address" placeholder="Enter Your PAN Card Number">
</div>
</div>
<div class="form-group">
<label for="email" class ="control-label col-sm-3 mob">Monthly Income</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" placeholder="Enter Your Monthly Income">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div style="font-weight:bold; color:#fff;">Have you availed Loan Or Credit Card From Any Bank</div>
</div>
<div class="col-sm-12">
<div class="radio-inline">
<label style="color:#fff;">
<input style="color:#fff !important;" type="radio" name="gender" value="yes" checked/> Yes
</label>
</div>
<div class="radio-inline">
<label style="color:#fff;">
<input style="color:#fff !important;" type="radio" name="gender" value="no" /> No
</label>
</div>
</div>
</div>
以下是我使用的Javascript代码：
<script type="text/javascript">
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function () {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-success').trigger('click');
});
</script>