时间戳

首页 > 解决方案 > 选项卡窗格不可点击？

jquery - 选项卡窗格不可点击？

问题描述

我想让一个选项卡窗格不可点击，是一个表单，然后我只想在第一个表单完成的情况下进入该窗格，但我无法让它不可点击，即使unbind()有人可以帮助我吗？

<ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#datospersonales" data-toggle="tab">
                            Datos Personales
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" href="#datosgenerales" id="ficha-dg">
                            Datos Generales
                        </a>
                    </li>
                </ul>

                <div class="tab-content" style="min-height: 300px;">

                    <!-- TAB DATOS PERSONALES -->

                    <div id="datospersonales" class="tab-pane fade in active">
                        <div class="row pt-15">
                            <div class="col-xs-12 col-md-2">
                                <label for="newrut" class="control-label">Rut:</label>
                                <input type="text" id="newrut" name="newrut" class="form-control"
                                    data-inputmask="'mask':'99.999.999-*'" datamask required
                                    placeholder="__.___.___-_">
                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

            <!-- FINAL TAB DATOS PERSONALES -->

            <!-- TAB DATOS GENERALES -->

            <div id="datosgenerales" class="tab pane fade">

            </div>
        </div>
    </div>

我试过的jQuery代码

$('#ficha-dg').unbind('click');

标签： jqueryhtml

解决方案

您可以禁用其他选项卡，直到第一个选项卡完成。

例如：

编写一个类来禁用选项卡：

.disabled-tab {
  cursor: disabled;
}

然后我们想编写一些 jQuery 来在第一个选项卡完成时删除该类：

var fields = document.getElementById('newrut');

if (!newrut) {
 if ('.nav-tabs li').hasClass('disabled') {
   $(this).removeClass('disabled');
 }
}

尚未对其进行测试，但是这些方面的东西应该可以工作。

推荐阅读