2

出于某种原因，我需要禁用twitter-bootstrap-wizard中的标签点击。

是否可以在不破坏向导的情况下禁用引导向导选项卡单击和光标指针？

启用选项卡的向导：

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

当前的解决方法

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

这会禁用对选项卡的点击，但附加了cursor: pointer点击事件侦听器。

我的尝试

获得所需的选项卡行为，但向导已损坏

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

是否可以像我的尝试一样禁用选项卡但使用工作向导？

PS：与这个问题特别相关

4

0 回答 0