如何禁用下一个按钮，直到所有字段都完成

与其禁用按钮，更简单的解决方案是在按键时进行验证。我已经更新了您的代码片段说明：它做了一个简单的检查——如果所有字段都已填写，请导航，如果没有，则弹出一条消息，指示用户填写每个字段。

此外，每个按钮都应该有唯一的ID。ID不应在单个页面中重复。

/*-form nav-*/
var interval = undefined;
$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.previous').on('click', getPrev);
});
function getNext() {
    var $curr = $('fieldset:visible'),
        empty = false
        $next = ($curr.next().length) ? $curr.next() : $('fieldset').first();
  
    $curr.find('input[type!=button]').each(function() {
      if ($(this).val() == '') {
                empty = true
      }
    });
  
    if (!empty) {
      transition($curr, $next);
    } else {
      alert('Please fill out all fields!');
    }
}
function getPrev() {
    var $curr = $('fieldset:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
    transition($curr, $next);
}
function transition($curr, $next) {
    clearInterval(interval);
    $curr.hide();
    $next.show();
}

fieldset {
padding:0!important; 
margin:0 !important;
border: 0;
}
fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#content {
display:table;
width:100%;
margin-top:-10px;
padding-bottom:250px; /* Height of the footer element */
}
#holder{
opacity: 1.0;
margin: 0 auto;
border: 2px solid #174570;
background-color: #1F75BA;
width: 525px;
display:table;
}
#centhold{
background-color: white;
padding: 10px;
margin:-10 -15 0 -15;
width:100%;
display:table;
}
#cent{
font-weight: bold;
font-size:35px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
margin-bottom: 10px;
display:table;
}
#cent2{
font-weight: bold;
font-size:25px;
width:100%;
margin: 0 auto;
text-align:center;
color:#1F75BA;
display:table;
}
#sect{
width: 75%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 12px;
display:table;
}
#left{
color:white;
float:left;
width:210px;
}
#right{
width:160px;
float:right;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
border-radius: 5px;
padding: 3px 18.5px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #F0F8FF;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #0594CF;
background-image: -moz-linear-gradient(top,,#0594CF);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#0594CF));
background-image: -webkit-linear-gradient(top,,#0594CF);
background-image: -o-linear-gradient(top,,#0594CF);
background-image: linear-gradient(to bottom,,#0594CF);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #0594CF #0594CF #0594CF;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #0594CF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#0594CF;/*selected */
}
input[type="text"] {
padding:2px;
width:160px;
height:28px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
 }
select{
height:29px;
width:165px;
padding:2px;
border: 1px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
}
textarea {
padding:2px;
border: px groove #174570;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:100px;
width:160px;
}
#but{
float:right;
margin-top:10px;
margin-right:66px;
width:75%;
position:relative;
}
.action-button {
float:right;
margin-right:10px;
margin-left:5px;
text-transform: capitalize;
width:145px;
height:37px;
background: #90b652;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 6px;
cursor: pointer;
padding: 10px 5px;
margin: 7px 13px;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="auto" method="post" action=""/>
<input type="hidden" name="token" value="<?php echo $token; ?>" />
<fieldset>
<div id="holder">
<div id="sect">
<div id="left">Year</div>
<div id="right">
<input type="text" name="year" class="input" maxlength="4">
</div>
</div><!--sect-->
<div id="sect">
<div id="left">Make</div>
<div id="right"><input type="text" name="make" class="input">
</div>
</div><!--sect-->
<div id="sect">
<div id="left">Model</div>
<div id="right"><span id="sprytextfield7"><input type="text" name="model" class="input">
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->
<div id="sect">
<div id="left">vehicles</div>
<div id="right"><span id="sprytextfield7">
<select class="carnum" name="carnum"> 
<option value="none" selected="selected">Select</option>
<option value="1" >1 vehicle</option>
<option value="2" >2 vehicles</option>
<option value="3" >3 vehicles</option>
<option value="4" >4 vehicles</option>
<option value="5" >5 vehicles</option>
<option value="6" >More than 5 vehicles</option>
</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->
<div id="but">
<input type="button" name="next" class="next action-button" value="Next" id="button1" />
</div><!--but-->
</div><!--holder-->
</fieldset> 

<fieldset>
<div id="centhold">
<div id="cent">Let us know how to contact you.</div>
</div>
<div id="holder">
<div id="sect">
<div id="left">First and Last Name</div>
<div id="right">
<span id="sprytextfield7">
<input name="name" type="text" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">Name is required.</span><span class="textfieldInvalidFormatMsg">Name is Invalid.</span></span></div>
</div>
</div><!--sect-->
<div id="sect">
<div id="left">Street Address</div>
<div id="right">
<span id="sprytextfield4">
<input type="text" name="addy" class="input">
<div id="error"><span class="textfieldRequiredMsg">Address is required.</span><span class="textfieldInvalidFormatMsg">Address is Invalid.</span></span></div>
</div>
</div><!--sect-->
<div id="sect">
<div id="left">Zip Code</div>
<div id="right">
<span id="sprytextfield3">
<input type="text" name="zip" class="input" maxlength="5">
<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->
<div id="sect">
<div id="left">City</div>
<div id="right">
<span id="sprytextfield6">
<input type="text" name="city" class="input" maxlength="50">
<div id="error"><span class="textfieldRequiredMsg">City is required.</span><span class="textfieldInvalidFormatMsg">City is Invalid.</span></span></div>
</div>
</div><!--sect-->
<div id="sect">
<div id="left">State</div>
<div id="right"><span id="sprytextfield7">
<select class="state" name="state"> 
<option value="none" selected="selected">Select</option>
<option value="Illinois" >Illinois</option>
<option value="Indiana" >Indiana</option>
<option value="Kentucky" >Kentucky</option>
<option value="Michigan" >Michigan</option>
<option value="Ohio" >Ohio</option>
</select>
<div id="error"><span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></div></div>
</div><!--sect-->
<div id="sect">
<div id="left">Phone Number</div>
<div id="right"><span id="sprytextfield2">
<input type="text" name="phone" class="input" placeholder="EX:614-222-2222"><br/>
<div id="error"><span class="textfieldRequiredMsg">Phone Number is required.</span><span class="textfieldInvalidFormatMsg">Format: (890)123-4567</span></span></div></div>
</div><!--sect-->
<div id="sect">
<div id="left">Email Address</div>
<div id="right"><span id="sprytextfield1">
<input type="text" name="email" class="input">
<div id="error"><span class="textfieldRequiredMsg">E-mail is Required.</span><span class="textfieldInvalidFormatMsg">E-mail is Invalid.</span></span></div></div>
</div><!--sect-->
<div id="sect">
<div id="left">Preferred method of contact</div>
<div id="right">
<span id="sprytextfield7">
<input type="radio" id="radio1" name="contact" value="PHONE" checked>
  <label for="radio1">PHONE</label>
         	
        
<input type="radio" id="radio2" name="contact" value="email">
  <label for="radio2">EMAIL</label>
<div id="error"><span class="textfieldRequiredMsg">Zip Code is required.</span><span class="textfieldInvalidFormatMsg">Zip Code is Invalid.</span></span></div>
</div>
</div><!--sect-->
<div id="sect">
<div id="left">Comments</div>
<div id="right"><textarea name="comments"  class="comments" id="comments" placeholder="comments"></textarea></div>
</div><!--sect-->
<div id="but">
<input type="submit" name="submit" class="submit action-button" value="SAVE ME MONEY!" id="button2" />
<input type="button" name="previous" class="previous action-button" value="Previous" id="button3"/>
</div><!--but-->
</div><!--holder-->
</fieldset>
</form>

您可以使用html5表单验证。在所有字段都有值之前，它将不允许提交表单。

HTML:

 <form id="form-name">
     Username<br />
 <input type="text" id="user_input" name="username" required /><br />
     Password<br />
<input type="password" id="pass_input" name="password" required /><br />
     Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" required /><br />
     Email<br />
<input type="text" id="email" name="email" required /><br />     
<input type="submit" id="register" value="submit" />

下面是一个jsfiddle示例：https://jsfiddle.net/qKG5F/2152/

我认为您对所有按钮都使用了相同的id="button"。正确的做法是为按钮使用不同的id，这样您就可以正确地使用Jquery访问它们，并在没有冲突的情况下禁用它们。

你的禁用代码运行良好，我认为你与id有冲突。