如何設置帶有禁用字段的jQuery分步表單

Question

我正在嘗試設置一步一步的表單，該表單將禁用所有下一個字段，直到完成當前步驟。然後它會通過應用一個班級來標記所有完成的領域。我有一半的設置，我可以按照正確的順序逐個激活字段並在完成時應用該類。

當我不得不通過表單追溯時，我的問題就出現了。例如，如果前一個字段再次變回空值，則下一個字段應全部禁用。這似乎只是現在發生，如果我停用第一個領域，但不是下列領域。

我還有另一個問題，如果我禁用第一個字段，然後再次應用一個值，窗體應該標記爲完成，所有現有的已完成的字段也應該標記爲完成，導致我到下一個未完成的字段但它實際上正在等待我再次更改下一個字段以繼續。

我附上了一個例子。如果你能提供任何幫助，將不勝感激。

jQuery(function($) { 
 

 

 
     var currentStep = $('.tq-form-step'); 
 
     currentStep.addClass('tq-form-step--disabled'); 
 
     currentStep.first().removeClass('tq-form-step--disabled'); 
 
    
 
     $(currentStep).change(function() { 
 
     if ($('.tq-step-form--input').val() != '') { 
 
      $(this).addClass('tq-form-step--completed'); 
 
      $(this).next().removeClass('tq-form-step--disabled'); 
 

 
     } else { 
 
      $('.tq-form-step').removeClass('tq-form-step--completed'); 
 
      $('.tq-form-step').next().addClass('tq-form-step--disabled'); 
 
     } 
 

 
     }); 
 

 
     var fieldSet = $('.tq-form-fieldset__wrapper');  
 

 
     $(fieldSet).ready(function() { 
 
     if($('.tq-step-form--hidden')) { 
 
      $('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').hide(); 
 
     } else if ($('.tq-step-form--hidden').prev('.tq-step-form--input').val() != '') { 
 
      console.log('text'); 
 
      $('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').show(); 
 
     } 
 
     }); 
 
     
 
    });

.tq-icon-list__image { 
 
\t display: inline-block; 
 
\t background: rgba(238,238,238,1); 
 
\t -webkit-transition: background 0.5s, color 0.2s; 
 
\t -moz-transition: background 0.5s, color 0.2s; 
 
\t transition: background 0.5s, color 0.2s; 
 
\t border-radius: 50%; 
 
\t width: 77px; 
 
\t height: 77px; 
 
\t line-height: 77px; 
 
\t margin-bottom: 10px; 
 
} 
 

 

 

 
.tq-form-step select { 
 
\t width: 100%; 
 
\t box-shadow: none; 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t border: 2px solid #6b1f99; 
 
\t box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); 
 
} 
 

 
.tq-form-step--disabled { 
 
\t opacity: 0.5; 
 
\t pointer-events: none; 
 
} 
 

 
.tq-form-step__number-container { 
 
\t position: relative; 
 
} 
 

 
.tq-form-step__connecting-line { 
 
\t margin-right: 30px; \t 
 
\t padding-top: 28px; 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 

 

 

 
.tq-form-step__form-fields { 
 
\t padding-bottom: 15px; 
 
} 
 

 
.tq-form-step:nth-last-child(2) .tq-form-step__connecting-line:after { 
 
\t border-right: 0; 
 
} 
 

 
.tq-form-step__number { \t 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t color: #6b1f99; 
 
\t font-size: 1.5em; \t 
 
\t text-align: center; 
 
\t z-index: 2; \t 
 
\t border: 4px solid #6b1f99; \t 
 
\t border-radius: 50%; 
 
\t background-color: #f7f7f7; 
 
\t -webkit-transition : border 500ms ease-out; 
 
    -moz-transition : border 500ms ease-out; 
 
    -o-transition : border 500ms ease-in; 
 
    transition : border 500ms ease-out; 
 
    display: table; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
.tq-step-form--hidden { 
 
\t display: block; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper { 
 
\t margin: 30px 0 0 30px; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:first-child:before { 
 
\t display: none; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:before { 
 
\t border-bottom: 2px dotted #b18ac7; 
 
\t border-left: 2px dotted #b18ac7; 
 
\t border-radius: 5px; 
 
\t z-index: 0; 
 
\t content: ""; 
 
\t position: absolute; 
 
\t font-size: 2em; 
 
\t height: 64px; 
 
\t width: 35px; 
 
\t left: 25px; 
 
\t margin-top: -32px; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:first-child { 
 
\t margin: 0; 
 
} 
 

 
.tq-form-step__number span { 
 
\t display: table-cell; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
} 
 

 
.tq-form-step--completed select, .tq-form-step--disabled select { 
 
\t border: 1px solid #bdbdbd; 
 
\t box-shadow: none; 
 
} 
 

 

 
.tq-form-step--completed .tq-form-step__number { 
 
\t border: 0; 
 
\t background-color: #b18ac7; 
 
\t border: 4px solid #b18ac7; 
 
\t color: #fff; 
 
} 
 

 
.tq-form-step.tq-form-step--completed label, .tq-form-step.tq-form-step--disabled label { 
 
\t font-size: 0.875em; 
 
\t font-weight: 200; 
 
} 
 

 
.tq-form-step--completed .tq-form-step__connecting-line:after { 
 
\t border-right: 3px solid #b18ac7; 
 
} 
 

 
.tq-form-step--disabled .tq-form-step__number { 
 
\t border: 4px solid #cccccc; \t 
 
\t color: #ccc; 
 
\t background-color: #f7f7f7; 
 
} 
 

 
.tq-form-step__submit { 
 
\t text-align: right; 
 
} 
 

 
.tq-form-step label { \t 
 
\t font-weight: 400; 
 
\t font-size: 1.125em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="tq-apply-now"> 
 

 
     <div class="row tq-form-step" id="step1"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>1</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="how-to-study">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="Test">Test</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step2"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>2</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="where-to-study">Choose</label><br> 
 
       <div class="tq-form-fieldset"> 
 
        <div class="tq-form-fieldset__wrapper"> 
 
        <select class="tq-step-form--input"> 
 
         <option value="" selected>Choose</option> 
 
         <option value="Here">Here</option> 
 
        </select> 
 
        </div> 
 
        <div class="tq-form-fieldset__wrapper"> 
 
        <select class="tq-step-form--hidden"> 
 
         <option value="" selected>Select</option> 
 
         <option value="Hills">Hills</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step3"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>3</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="workload">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="Test">Test</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step4"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>4</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="start-date">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="27 January 2018">27 January 2018</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step5"> 
 
      <div class="col-md-1 tq-equal-height-container"> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <div class="tq-form-step__submit"> 
 
       <input type="submit" value="Proceed with application" disabled class="tq-apply-now-step tq-button tq-button--red tq-step-form--input" id="tq-apply-now-step5"> 
 
       </div> 
 
      </div> 
 
     </div>     
 

 
     </form> 
 

 
     </div>

Answer 1

我不得不創建的jsfiddle，看看如果這是你努力實現

更新版本 https://jsfiddle.net/0mchrm9m/1/

function Sample(){ 
    $('div[id^="step"]').each(function(i, v){ 
     var $this = $(this); 
     var $icon = $this.first('div'); 
     if ($icon.hasClass('tq-form-step--disabled')){ 
      //do whatever for disabled class 
     }else{ 
      $icon.nextAll('div').removeClass('tq-form-step--disabled'); //remove all the disabled class 1st 
      if ($icon.find('select').prop('selectedIndex') === 0){ //check if the 1st selection index is 0 
      $icon.removeClass('tq-form-step--completed'); //remove current class 
      $icon.nextAll('div').addClass('tq-form-step--disabled'); //add disabled to all class that can be found next 
      }else{ 
      $icon.addClass('tq-form-step--completed'); //else make it as completed 
      } 
     } 
     }); 
    } 

上面的代碼中的一個相當自我解釋，如果你不明白，請告訴我

，你可以調用函數中

$(currentStep).change(function() { 
    /*if ($('.tq-step-form--input').val() != '') { 
     $(this).addClass('tq-form-step--completed'); 
     $(this).next().removeClass('tq-form-step--disabled'); 

    } else { 
     $('.tq-form-step').removeClass('tq-form-step--completed'); 
     $('.tq-form-step').next().addClass('tq-form-step--disabled'); 
    } */ //remove the code to fix the step 1 issue 
    Sample(); //call it here 
    }); 

這個代碼不優化的是，你可以優化它