Question

我想做什么？

下面是我使用Twitter Bootstrap向导的脚本，我想在点击按钮时禁用某些标签

有什么问题？

当我点击按钮时，我收到以下错误

索引：2138 Uncaught TypeError：$（...）。bootstrapWizard不是功能在HTMLInputElement。（索引：2138）在HTMLInputElement.dispatch（VM292 jquery-1.10.2.js：5109）在HTMLInputElement.elemData.handle（VM292 jquery-1.10.2.js：4780）

注意：行号无效

奇怪的是，错误仅发生在我禁用选项卡的行$('#rootwizard').bootstrapWizard("disable", 4);但是还有一行我使用了函数bootstrapWizard，但是它工作得很好$('#rootwizard').bootstrapWizard({

我认为这是由于我已经包含.js脚本的顺序，所以我尝试更改序列，但这没有帮助。

任何帮助表示赞赏！谢谢你的时间。

@model Models.***

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <div id="rootwizard">
            <div class="navbar">
                <div class="navbar-inner">
                    <ul class="nav nav-tabs pager nav-tabs-justified" role="tablist" id="myTab">
                        <li class="active nav-item"><a href="#tab1" data-toggle="tab">0</a></li>
                        <li class="nav-item"><a href="#tab2" data-toggle="tab">1</a></li>
                        <li class="nav-item"><a href="#tab3" data-toggle="tab">2</a></li>
                        <li class="nav-item"><a href="#tab4" data-toggle="tab">3</a></li>
                        <li class="nav-item"><a href="#tab5" data-toggle="tab">4</a></li>
                        <li class="nav-item"><a href="#tab6" data-toggle="tab">5</a></li>
                        <li class="nav-item"><a href="#tab7" data-toggle="tab">6</a></li>
                        <li class="nav-item"><a href="#tab8" data-toggle="tab">7</a></li>
                        <li class="nav-item"><a href="#tab9" data-toggle="tab">8</a></li>
                        <li class="nav-item"><a href="#tab10" data-toggle="tab">9</a></li>
                    </ul>
                </div>
            </div>
            <div id="bar" class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
            </div>

            @*Previous and Next buttons*@
            <ul class="pager wizard">
                @*<li class="previous first" style="display:none;"><a href="#">First</a></li>*@
                <li class="previous"><a href="#">Previous</a></li>
                @*<li class="next last" style="display:none;"><a href="#">Last</a></li>*@
                <li class="next"><a href="#">Next</a></li>
            </ul>

            <hr />

            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1">
                    <input type='button' class='btn' id='disable-step' value='Disable' />                        
                </div>
                <div class="tab-pane fade" id="tab2">

                </div>
                <div class="tab-pane fade" id="tab3">

                </div>

                <div class="tab-pane fade" id="tab4">

                </div>

                <div class="tab-pane fade" id="tab5">

                </div>
                <div class="tab-pane fade" id="tab6">

                </div>
                <div class="tab-pane fade" id="tab7">

                </div>
                <div class="tab-pane fade" id="tab8">

                </div>
                <div class="tab-pane fade" id="tab9">

                </div>
                <div class="tab-pane fade" id="tab10">

                </div>               

            </div>
        </div>

    </div>
}
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.bootstrap.wizard.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>

    <script type="text/javascript">

        // This works fine
        $('#rootwizard').bootstrapWizard({ 

            // disable the clicking on individual tabs so that users are forced to advance only using navigational buttons
            onTabClick: function (tab, navigation, index) {
                return false;
            },

            // adjust the progress-bar
            onTabShow: function (tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index + 1;
                var $percent = ($current / $total) * 100;
                $('#rootwizard .progress-bar').css({ width: $percent + '%' });
            },

            onNext: function (tab, navigation, index) {

                // validate input         

                return true;
            }

        });
    </script>


    <script type="text/javascript">
        // Disable step
        $('#disable-step').on('click', function () {
            $('#rootwizard').bootstrapWizard("disable", 4); // gives error
        });
    </script>

Twitter bootstrap：无法禁用该选项卡

0 个答案: