javascript - 根据复选框值显示/隐藏选项卡和部分

Question

我正在处理一个表单，想要根据复选框值显示/隐藏选项卡及其部分。我的代码可以工作，但如果您注意到，当您选中三个复选框时，它会取消隐藏 3 个选项卡，但它还会显示第一个选项卡下显示的所有三个部分。如果您在取消隐藏后单击任何选项卡，则效果很好。只是最初的取消隐藏并没有按照我需要的那样工作。这是我所拥有的:http://jsfiddle.net/jcaine04/HyMBD/

$(document).ready(function(){
        /*
        **********************
        *   Initialization   *
        **********************
        */

        $("#contractTypes").tabs(); //create the tabs
        $(".datepicker").datepicker({ //date picker code
            changeMonth: true,
            changeYear: true
        });

        //if UA Checkbox not checked, hide the section
        if (!$("#OBKey_Use_Agreement_Required").is(':checked')){
            $(".UASection").hide();
        }
        //if Extranet Checkbox not checked, hide the section
        if (!$("#OBKey_Extranet_Access").is(':checked')){
            $(".extranetSection").hide();
        }
        //if MoveIt Checkbox not checked, hide the section
        if (!$("#OBKey_Move_It_Access").is(':checked')){
            $(".moveItSection").hide();
        }


        /*
        **********************
        * End Initialization *
        **********************
        */

        //hide/show UA Section
        $("#OBKey_Use_Agreement_Required").click(function() {
            if ($("#OBKey_Use_Agreement_Required").is(":checked"))
            {
                $(".UASection").show("fast");
            } else {
                //otherwise hide it
                $(".UASection").hide("fast");
            }

        });

        //hide/show Extranet Section
        $("#OBKey_Extranet_Access").click(function() {
            if ($("#OBKey_Extranet_Access").is(":checked"))
            {
                //show hidden class
                //$(" #tabs ").tabs( "enable", 1 ); 
                $(".extranetSection").show("fast");
                //$("#tabs").tabs("select", "#UASection");

            } else {
                //otherwise hide it
                $(".extranetSection").hide("fast");
            }

        });

        //hide/show Move It Section
        $("#OBKey_Move_It_Access").click(function() {
            if ($("#OBKey_Move_It_Access").is(":checked"))
            {
                //show hidden class
                $(".moveItSection").show("fast");
                //$("#tabs").tabs("select", "#UASection");

            } else {
                //otherwise hide it
                $(".moveItSection").hide("fast");
            }

        });

    });

Answer 1

只需添加 refresh调用您的代码:

$("#OBKey_Use_Agreement_Required,#OBKey_Extranet_Access,#OBKey_Move_It_Access").click(function () {
    $("#contractTypes").tabs("refresh");
});

<强> jsFiddle example

来自文档:

Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels.