显示/隐藏标签和部分基于复选框的值
Showing/Hide Tabs and Section Based On Checkbox Value
我正在一个表单上工作,并希望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中添加或删除的选项卡重新计算制表符面板的高度。
相关文章:
- 显示隐藏复选框
- jquery单击隐藏的复选框
- 在jsTree中隐藏复选框
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 基于复选框隐藏/显示表格行
- 使用jQuery切换根据选中的复选框隐藏/显示表单提交按钮 - 如何设置默认关闭的提交按钮
- 如何在 Yii javascript 中使用复选框隐藏或显示文本字段
- 根据选定的复选框隐藏/显示内容
- 如何使用复选框隐藏和显示jquery数据表中的行
- 使用复选框隐藏我的数据时出现问题
- 复选框隐藏,除非选择了下拉值
- 通过复选框隐藏/显示文本区域,这些复选框具有不同部分的相同类
- 动态复选框隐藏动态输入框
- 如何使用自定义复选框隐藏网格列
- 通过复选框隐藏表格
- JQuery数组's和输入复选框+隐藏
- 使用复选框隐藏多个表单字段
- Symfony 2.3如何通过复选框隐藏/显示图像
- 使用复选框隐藏/显示基于类别的谷歌地图标记's
- 使用 JavaScript 确定复选框 + 隐藏字段组合的值