0

我正在使用 HTML 和 CSS 创建一个多阶段表单，效果很好。它在顶部有一个步进器，我想禁用第二个和后续字段，直到在第一个表单的按钮上触发点击事件。请协助？

CSS 和 HTML 代码的 Js Fiddle 链接

http://jsfiddle.net/8c4ktyq5/

布局

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<body>
<div class="container">
<main class="top">

<div class='progress'>
  <div class='progress_inner'>
    <div class='progress_inner__step'>
      <label for='step-1'>Travel Information</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-2'>Choose Plan</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-3'>Additional Information</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-4'>Payment</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-5'>Confirmation</label>
    </div>
    <input checked='checked' id='step-1' name='step' type='radio'>
    <input id='step-2' name='step' type='radio'>
    <input id='step-3' name='step' type='radio'>
    <input id='step-4' name='step' type='radio'>
    <input id='step-5' name='step' type='radio'>
    <div class='progress_inner__bar'></div>
    <div class='progress_inner__bar--set'></div>
    <div class='progress_inner__tabs'>


      <div class='tab tab-0'>
        <h1 class="quote-title"><a href="#"><span class="back-us"><i class="fas fa-arrow-left"></i>Back</span></a></h1>
<div class="form-contact">
<form>
    <div class="form-line registar love">
      <input type="text-area" class="form-input" required>
      <label>First Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar love">
      <input type="text-area" class="form-input" required>
      <label>Middle Name *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar love">
      <input type="text-area" class="form-input" required>
      <label>Surname *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>

    <div class="form-line registar love" style="margin-left: 0px;">
      <input type="text-area" class="form-input" required>
      <label>Email *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>
    <button type="submit" class="form-b3c love">Calculate Premium</button>

  </form>
  </div>
      </div>


      <div class='tab tab-1'>
        <div class="row">
  <div class="card plan">
    <h5 class="card-title plan">Superior</h5>
    <img class="card-img-top plan" src="images/superior.svg" alt="Card image cap">
    <div class="card-body">
      <div class="travel-plan">
  <div class="superior-content">
    <table class="table">
  <tbody>
    <tr>
      <td class="plan-title">Emergency Medical Expenses</td>
      <td class="plan-worth">Unlimited</td>
    </tr>
  </tbody>
</table>
  </div>
</div>
      <p class="card-text plan">TOTAL<span class="amount">$235.98</span></p>
      <a href="#" class="plan-quote"><span>Get Quote</span></a>
    </div>
  </div>

</div>
      </div>



      <div class='tab tab-2'>
         <h1 class="quote-title">Additional Information<a href="#"><span class="back-us"><i class="fas fa-arrow-left"></i>Back</span></a></h1>
<div class="form-contact">
<form>
    <div class="form-line registar2 move">
      <input type="text-area" class="form-input" required>
      <label>Upload Documents *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
    </div>


    <div class="check-now" style="width: 100%;">
    <label class="spouse-me">
    <h1 class="pumba">Enter next of kin</h1>
    <input type="checkbox">
    <span class="checkmark"></span>
    </label>
    </div>
    <button type="submit" class="form-b3c love">Calculate Premium</button>

  </form>
  </div>
      </div>



      <div class='tab tab-3'>
        <h1 class="quote-title">Pay Kshs 16,000<a href="#"><span class="back-us"><i class="fas fa-arrow-left"></i>Back</span></a></h1>
        <h2 class="package-plan">Plan: Travel Classic Package</h2>


</div>


</main>
</div>  


</body>
</html>
4

0 回答 0