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 {
	display: inline-block;
	background: rgba(238,238,238,1);
	-webkit-transition: background 0.5s, color 0.2s;
	-moz-transition: background 0.5s, color 0.2s;
	transition: background 0.5s, color 0.2s;
	border-radius: 50%;
	width: 77px;
	height: 77px;
	line-height: 77px;
	margin-bottom: 10px;
}



.tq-form-step select {
	width: 100%;
	box-shadow: none;
	position: relative;
	z-index: 1;
	border: 2px solid #6b1f99;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

.tq-form-step--disabled {
	opacity: 0.5;
	pointer-events: none;
}

.tq-form-step__number-container {
	position: relative;
}

.tq-form-step__connecting-line {
	margin-right: 30px;	
	padding-top: 28px;
	position: relative;
	z-index: 1;
}



.tq-form-step__form-fields {
	padding-bottom: 15px;
}

.tq-form-step:nth-last-child(2) .tq-form-step__connecting-line:after {
	border-right: 0;
}

.tq-form-step__number {	
	width: 60px;
	height: 60px;
	color: #6b1f99;
	font-size: 1.5em;	
	text-align: center;
	z-index: 2;	
	border: 4px solid #6b1f99;	
	border-radius: 50%;
	background-color: #f7f7f7;
	-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 {
	display: block;
}

.tq-form-fieldset .tq-form-fieldset__wrapper {
	margin: 30px 0 0 30px;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:first-child:before {
	display: none;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:before {
	border-bottom: 2px dotted #b18ac7;
	border-left: 2px dotted #b18ac7;
	border-radius: 5px;
	z-index: 0;
	content: "";
	position: absolute;
	font-size: 2em;
	height: 64px;
	width: 35px;
	left: 25px;
	margin-top: -32px;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:first-child {
	margin: 0;
}

.tq-form-step__number span {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}

.tq-form-step--completed select, .tq-form-step--disabled select {
	border: 1px solid #bdbdbd;
	box-shadow: none;
}


.tq-form-step--completed .tq-form-step__number {
	border: 0;
	background-color: #b18ac7;
	border: 4px solid #b18ac7;
	color: #fff;
}

.tq-form-step.tq-form-step--completed label, .tq-form-step.tq-form-step--disabled label {
	font-size: 0.875em;
	font-weight: 200;
}

.tq-form-step--completed .tq-form-step__connecting-line:after {
	border-right: 3px solid #b18ac7;
}

.tq-form-step--disabled .tq-form-step__number {
	border: 4px solid #cccccc;	
	color: #ccc;
	background-color: #f7f7f7;
}

.tq-form-step__submit {
	text-align: right;
}

.tq-form-step label {	
	font-weight: 400;
	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
  });

此代码尚未优化，您可以对其进行优化

如何使用禁用的字段设置jQuery循序渐进的表单

1 个答案: