javascript - 如何将选项卡设置为禁用/启用

Question

我有一项任务是在单击复选框时禁用和启用选项卡。但是在我的第一个选项卡中，我有两个字段名称和年龄。第二个选项卡仅在第一个选项卡的验证完成后启用。我可以通过选中复选框来显示选项卡，但它不应该启用。我该怎么做？我的 Html 代码是

 <div id="tabs">
        <ul>
            <li><a href="#tabs-0">Tab1</a> 
            </li>
            <li><a href="#tabs-1">Tab2</a>

            </li>
            <li><a href="#tabs-2">Tab3</a>

            </li>
            <li><a href="#tabs-3">Tab4</a>

            </li>
        </ul>
        <div id="tabs-0"> <b>Name</b>

            <input type="text" id="name" />
            <br/> <b>Age</b>
            <input type="text" id="age" />
            <br/>
    <input type="checkbox" name="tabs-0" value="0" checked>tabs-1
    <input type="checkbox" name="tabs-1" value="1" disabled>tabs-2
    <input type="checkbox" name="tabs-2" value="2" disabled>tabs-3
    <input type="checkbox" name="tabs-3" value="3" disabled>tabs-4

            <input type="submit" value="next" class="submit" />
        </div>
        <div id="tabs-1"> <b>city</b>

            <input type="text" id="name" />
            <br/> <b>state</b>

            <input type="text" id="age" />
            <br/>
            <input type="submit" value="next" class="submit" />
        </div>
        <div id="tabs-2">
            <p>Tab3</p>
        </div>
        <div id="tabs-3">
            <p>Tab4</p>
        </div>

    </div>

Javascript

$(function () {
    $("#tabs").tabs();
    $("#tabs").tabs("option", {
        "selected": 0,
            "disabled": [1, 2, 3]
    });

    $('.submit').click(function () {
        if($('#name').val()=='')
        {
            alert("empty");
        }
        else
        {
        var nexttab = parseInt($(this).parent().next().attr('id').match(/\d+/g), 10);
        $('#tabs').tabs("enable", nexttab).tabs("select", nexttab);
        $('input[name="tabs-'+nexttab+'"]').removeAttr('disabled').prop('checked', true);
        }
    });


    $("input[type=checkbox]").click(function () {
        if ($(this).is(':checked')) {
            $('#tabs').tabs("enable", $(this).val());
            $('#tabs').tabs("select", $(this).val()-1);
        } else {
            $('#tabs').tabs("disable", $(this).val());
            var tab = $(this);
            $(":checked").each(function (index) {
                $('#tabs').tabs("select", $(this).val());
            });
        }
    });
});

你可以看到 DEMO

Answer 1

根据我的理解。试试这个

<input type="checkbox" name="tabs-1" value="1" checked>tabs-2
<input type="checkbox" name="tabs-2" value="2" checked>tabs-3
<input type="checkbox" name="tabs-3" value="3" checked>tabs-4

代替

<input type="checkbox" name="tabs-1" value="1" disabled>tabs-2
<input type="checkbox" name="tabs-2" value="2" disabled>tabs-3
<input type="checkbox" name="tabs-3" value="3" disabled>tabs-4

移除 CSS

.ui-state-disabled {
 display: none;
 }

JS 变化

$("#tabs").tabs("option", {
    "selected": 0            
});

Demo