Как включить вторую вкладку после завершения первой проверки закладки

Question

У меня есть вкладка со следующими полями

<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> 

Здесь закладками 1 имеет два fields.The второй закладке этого необходимо включить только после того, как завершение проверки первой вкладки. Мы можем выбрать show/hide, используя флажок, но не активируем. Как я могу это сделать? Вы можете увидеть код DEMO

Answer 1

В этом примере input submit имеет класс submit. Я также изменил вкладку ids (см скрипки)

скрипку 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); 
});