CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-wizard
Pavlo Zhukov
Pavlo Zhukov

Reputation: 3337

Disable bootstrap tab without breaking pagination in wizard

For some reason I need disable click by tabs in twitter-bootstrap-wizard.

Is it possible to disable bootstrap wizard tabs click and and cursor pointer without breaking a wizard?

Wizard with enabled tabs:

$(function () {
    const wizard = $('#wizard');
    wizard.bootstrapWizard({
        'tabClass': 'nav nav-pills',
        onTabShow: function(tab, navigation, index) {
            const $total = navigation.find('li').length;
            const $current = index + 1;

            // If it's the last tab then hide the last button and show the finish instead
            const pager = wizard.find('.pager');
            if ($current >= $total) {
                pager.find('.next').hide();
                pager.find('.finish').show();
                pager.find('.finish').removeClass('disabled');
            } else {
                pager.find('.next').show();
                pager.find('.finish').hide();
            }
        }});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

Current workaround

$(function () {
    const wizard = $('#wizard');
    wizard.bootstrapWizard({
        'tabClass': 'nav nav-pills',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        onTabShow: function(tab, navigation, index) {
            const $total = navigation.find('li').length;
            const $current = index + 1;

            // If it's the last tab then hide the last button and show the finish instead
            const pager = wizard.find('.pager');
            if ($current >= $total) {
                pager.find('.next').hide();
                pager.find('.finish').show();
                pager.find('.finish').removeClass('disabled');
            } else {
                pager.find('.next').show();
                pager.find('.finish').hide();
            }
        }});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

This disables clicks on tabs but there are cursor: pointer and click event listener attached.

My try

Got required tabs behavior but wizard is broken

$(function () {
        const wizard = $('#wizard');
        wizard.bootstrapWizard({
            'tabClass': 'nav nav-pills',
            onTabShow: function(tab, navigation, index) {
                const $total = navigation.find('li').length;
                const $current = index + 1;

                // If it's the last tab then hide the last button and show the finish instead
                const pager = wizard.find('.pager');
                if ($current >= $total) {
                    pager.find('.next').hide();
                    pager.find('.finish').show();
                    pager.find('.finish').removeClass('disabled');
                } else {
                    pager.find('.next').show();
                    pager.find('.finish').hide();
                }
            }});
    })
#wizard ul li a {
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

Is it possible to disable tabs as in my try but with working wizard?

P.S: it is particularly related to this question

Upvotes: 2

Views: 1134

Answers (0)

Related Questions