How to set the tab as disabled/enabled

Question

I have got a task to disable and enable tabs on the click of the checkbox.But in my first tab I have two filds name and age. The second tab is enabled only after the completion of the validation of first tab.I can show the tab by selecting the check box but it should not enabled.How can I do this? My Html code is

 <div id="tabs">
        <ul>
            <li><a href="#tabs-0">Tab1</a> 
            </li>
            <li><a href="#tabs-1">Tab2</a>

            </li>
            <li><a href="#tabs-2">Tab3</a>

            </li>
            <li><a href="#tabs-3">Tab4</a>

            </li>
        </ul>
        <div id="tabs-0"> <b>Name</b>

            <input type="text" id="name" />
            <br/> <b>Age</b>
            <input type="text" id="age" />
            <br/>
    <input type="checkbox" name="tabs-0" value="0" checked>tabs-1
    <input type="checkbox" name="tabs-1" value="1" disabled>tabs-2
    <input type="checkbox" name="tabs-2" value="2" disabled>tabs-3
    <input type="checkbox" name="tabs-3" value="3" disabled>tabs-4

            <input type="submit" value="next" class="submit" />
        </div>
        <div id="tabs-1"> <b>city</b>

            <input type="text" id="name" />
            <br/> <b>state</b>

            <input type="text" id="age" />
            <br/>
            <input type="submit" value="next" class="submit" />
        </div>
        <div id="tabs-2">
            <p>Tab3</p>
        </div>
        <div id="tabs-3">
            <p>Tab4</p>
        </div>

    </div>

Javascript

$(function () {
    $("#tabs").tabs();
    $("#tabs").tabs("option", {
        "selected": 0,
            "disabled": [1, 2, 3]
    });

    $('.submit').click(function () {
        if($('#name').val()=='')
        {
            alert("empty");
        }
        else
        {
        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);
        }
    });


    $("input[type=checkbox]").click(function () {
        if ($(this).is(':checked')) {
            $('#tabs').tabs("enable", $(this).val());
            $('#tabs').tabs("select", $(this).val()-1);
        } else {
            $('#tabs').tabs("disable", $(this).val());
            var tab = $(this);
            $(":checked").each(function (index) {
                $('#tabs').tabs("select", $(this).val());
            });
        }
    });
});

You can see the DEMO

Answer 1

As per my understanding. Try this

<input type="checkbox" name="tabs-1" value="1" checked>tabs-2
<input type="checkbox" name="tabs-2" value="2" checked>tabs-3
<input type="checkbox" name="tabs-3" value="3" checked>tabs-4

Instead of

<input type="checkbox" name="tabs-1" value="1" disabled>tabs-2
<input type="checkbox" name="tabs-2" value="2" disabled>tabs-3
<input type="checkbox" name="tabs-3" value="3" disabled>tabs-4

Remove CSS

.ui-state-disabled {
 display: none;
 }

JS Changes

$("#tabs").tabs("option", {
    "selected": 0            
});

Demo