我有包含以下字段的选项卡
<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 有两个字段。第二个选项卡必须在第一个选项卡验证完成后才启用。我们可以使用复选框选择显示/隐藏,但不会激活。我该怎么做?你可以看到代码DEMO http://jsfiddle.net/2aQ2g/52/
在这个例子中input submit
有课submit
。我还更改了选项卡ids
(参见小提琴)
FIDDLE http://jsfiddle.net/Spokey/2aQ2g/54/ 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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)