显示/隐藏标签和部分基于复选框的值

Showing/Hide Tabs and Section Based On Checkbox Value

本文关键字:复选框 隐藏 标签 显示      更新时间:2023-09-26

我正在一个表单上工作,并希望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");
            }
        });
    });

只需在代码中添加一个刷新调用:

$("#OBKey_Use_Agreement_Required,#OBKey_Extranet_Access,#OBKey_Move_It_Access").click(function () {
    $("#contractTypes").tabs("refresh");
});
<<p> jsFiddle例子/strong>

From the docs:

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