0

我正在处理一个表单，并希望show/hide根据复选框值来设置选项卡及其部分。我的代码有点工作，但是如果您注意到当您选中三个复选框时，它会取消隐藏 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");
            }

        });

    });
4

1 回答 1

2

只需向您的代码添加一个刷新调用：

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

jsFiddle 示例

从文档：

处理直接在 DOM 中添加或删除的任何选项卡并重新计算选项卡面板的高度。

于 2013-05-24T16:54:34.513 回答