如何在完成第一个选项卡验证后启用第二个选项卡 [英] How to enable the second tab after the completion of the first tab validation
本文介绍了如何在完成第一个选项卡验证后启用第二个选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下字段的标签:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab1</a> </li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>
<li><a href="#tabs-4">Tab4</a></li>
</ul>
<div id="tabs-1">
<b>Name</b>
<input type="text" id="name"><br/>
<b>Age</b>
<input type="text" id="age"><br/>
<input type="submit" value="next" id="submit"/>
</div>
<div id="tabs-2">
<form name="nithin">
</div>
<div id="tabs-3">
<p>Tab3</p>
</div>
<div id="tabs-4">
<p>Tab4</p>
</div>
</div>
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
<br>
这里tab-1有两个字段。第二个选项卡必须在完成验证第一个tab.We可以选择显示/隐藏使用复选框,但不会激活。我该如何做到这一点?您可以查看代码 DEMO
Here tab-1 has two fields.The second tab of this must be enable only after the completion of the validation of first tab.We can select show/hide using the checkbox but will not activated.How can I do this? You can see the code DEMO
推荐答案
在此示例中,输入提交
具有类 submit
。我也更改了标签 ids
(见fiddle)
In this example the input submit
has the class submit
. I also changed the tab ids
(see fiddle)
FIDDLE http://jsfiddle.net/Spokey/2aQ2g/54/
$('.submit').click(function (e) {
e.preventDefault(); //prevent from submission and do script instead
//validation ....
//if validation is okay, do below
var nexttab = parseInt($(this).parent().next().attr('id').match(/\d+/g), 10);
$('#tabs').tabs("enable", nexttab).tabs("select", nexttab);
$('input[name="tabs-'+nexttab+'"]').removeAttr('disabled').prop('checked', true);
});
这篇关于如何在完成第一个选项卡验证后启用第二个选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文