how to disable nav tabs bootstrap tabs

Question

I have an application form under TAB A. I have also other tabs other than TAB A.So as i fill up the form, the other tabs are disabled, after filling up the form, the next tab becomes active and the previous tab, while the other tabs are still disabled. how am i gonna achieve this? Help me please :)

<ul class="nav nav-tabs">
    <li class="active"><a id="a" href="${pageContext.request.contextPath}/employee/details/A">TAB A</a></li>
    <li><a id="b" href="${pageContext.request.contextPath}/employee/details/B">TAB B</a></li>
    <li><a id="c" href="${pageContext.request.contextPath}/employee/details/C">TAB C</a></li>
    <li><a id="d" href="${pageContext.request.contextPath}/employee/details/D">TAB D</a></li>
</ul>

Answer 1

So basically you need a Bootstrap form wizard. I hope this could help you.

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-success').addClass('btn-default');
            $item.addClass('btn-success');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-success').trigger('click');
});