jquery - 以多阶段形式使用 Jquery 禁用选项卡的问题
问题描述
我正在使用 HTML 和 CSS 创建一个多阶段表单,效果很好。它在顶部有一个步进器,我想禁用第二个和后续字段,直到在第一个表单的按钮上触发点击事件。请协助?
CSS 和 HTML 代码的 Js Fiddle 链接
布局
<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>
解决方案
推荐阅读
- php - Laravel validate() 方法在 false 时返回 index html 页面
- git - 为什么在 Windows 中使用“git bash”时,它与在 Windows 中打开“wsl Ubuntu”时看起来不一样?
- c# - 是否有在 C# (Unity) 中编写异步委托的优雅解决方案
- git - 在 git 中将多个提交合并为一个
- c - 如何从我的 C 代码中的不同文件更改数组?
- apache-kafka - kafka connect hdfs sink连接器如何保证exactly-once交付?
- php - 带有 php foreach 的下拉菜单项
- xaml - 未检测到已安装的组件。元素已经是另一个元素的子元素。加载搜索框时出现 UWP 错误
- python - python中的“分配前引用的局部变量'stringData'”错误
- amazon-web-services - 有没有办法在 AWS CodeArtifact 中指定非唯一的快照版本行为?