Page 1 of 1

Hide or show Tab with checkboxes (allow multiple selections)

Posted: 10 Apr 2015
by pablodiaz
Hi all:
I create a form that contains four tabs. Tab 0 must show a field (test1) with four checkboxes (allow multiple selections). Depending on the button that is chosen, one of the other tabs must be hide or show. I made this script but only works with Radio Buttons not for multiple selections.
Can you help me?
Thanks
Pablo

function setResourceTab()
{
var status = fd.field('test1').value();
switch (status) {
//Caso0:Resource1
case 0:
$('#fd_tabcontrol-0')
.tabs('option', 'active', 0, 4)
.tabs('option', 'disabled', [2, 3]);
break;
//Caso1:Resource2
case 1:
$('#fd_tabcontrol-0')
.tabs('option', 'active', 0)
.tabs('option', 'disabled', [1, 3, 4]);
break;
default:
$('#fd_tabcontrol-0')
.tabs('option', 'active', 0)
.tabs('option', 'disabled', [1, 2, 3, 4]);
break;
}
}

fd.field('test1').change(function()
{
setResourceTab();
});

setResourceTab();

Re: Hide or show Tab with checkboxes (allow multiple selections)

Posted: 13 Apr 2015
by Dmitry Kozlov
Hi Pablo,

Please, try the following code. Do not forget to replace ChoiceField with the internal name of your choice field (checkboxes):

Code: Select all

function setTabs() {
     var disabledTabs = [1, 2, 3, 4];
     var defaultTab = 0;
     var selectedOptions = fd.field('ChoiceField').value();
     
     if ($.inArray(0, selectedOptions) != -1) {
        disabledTabs = $.grep(disabledTabs, function(a){ return a !== 1 });
     }
     
     if ($.inArray(1, selectedOptions) != -1) {
        disabledTabs = $.grep(disabledTabs, function(a){ return a !== 2 });
     }
     
     if ($.inArray(2, selectedOptions) != -1) {
        disabledTabs = $.grep(disabledTabs, function(a){ return a !== 3 });
     }

     if ($.inArray(3, selectedOptions) != -1) {
        disabledTabs = $.grep(disabledTabs, function(a){ return a !== 4 });
     }
     
     if ($.inArray($('#fd_tabcontrol-0').tabs('option', 'active'), disabledTabs) != -1) {
        $('#fd_tabcontrol-0').tabs('option', 'active', defaultTab);
     }
     
     $('#fd_tabcontrol-0').tabs('option', 'disabled', disabledTabs); 
}

fd.field('ChoiceField').change(setTabs);

setTabs();