Question

我正在处理表单，并希望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");
            }

        });

    });

Answer 1

只需在代码中添加refresh来电：

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

<强> jsFiddle example

来自文档：

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

显示/隐藏基于复选框值的选项卡和部分

1 个答案: