enable/disable tabs based on drop down menus selection

Question

Hi I have a combo box having 5 drop down items in Tab1 and different tabs are present such as tab1, tab2, tab3, tab4 and tab5.Tab1 is in enabled mode and other tabs are in disabled mode.In disabled tabs different text boxes are present. Suppose I have a combo box and from that combo box items named as a, b, c, d, e are coming in Tab1. If i will select item d from the drop down menus then i will automatically go to tab4 or any tab(need not be the same order as drop down items). So now i have two tabs enabled i.e. Tab1 and Tab4. But if i will select any other items such as item b from the drop down menus(in tab1) then i will stay in tab1 and Tab4 will be disabled and also entered value in Tab4 will be removed. Please have a look at this fiddle:

http://jsfiddle.net/AavsW/6/

It is working same for check boxes but i cannot find why it is not working for combo box? In place of checkbox i kept combo box but it is not working why?

Please help me to solve this problem. Thanks

Ashfaq Shaikh · Accepted Answer · 2012-02-01 06:11:49Z

1

You can do it in this way. http://jsfiddle.net/AavsW/18/

<select name="porting-p1" class="dropdown">
<option value="1" class="disablenext">Please select an option...</option>
<option value="2" class="enablenext">TERMS 1</option>
<option value="3" class="enablenext">TERMS 2</option>
        </select>

$('.dropdown').change(function() {
            // enable tab
        $('#wizard').tabs('enable', $('.dropdown').val());
        // select tab
        $('#wizard').tabs('select', $('.dropdown').val());

            // disable tab
        $('.dropdown option').each(function()
        {

                        $('#wizard').tabs('disable',$(this).val());
        });



    });

answered Feb 1, 2012 at 6:11

Ashfaq Shaikh

1,66812 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

harry Over a year ago

thanks for your help...but after going to 2nd tab Tab1 should not be disabled? After choosing an item from combo box in tab1 it is going to tab2 but at this time Tab1 is being disabled which should not be, both tab1 and tab2 should be in enabled mode. Now i came to tab1 and i selected a different item then tab2 will be disabled.

Ashfaq Shaikh Over a year ago

use this code. $('.dropdown option').each(function() { if($(this).val()!=1) $('#wizard').tabs('disable',$(this).val()); });

harry Over a year ago

ya thanks a lot..i got it...just one stuff is left. When Tab2 is disabled then any entered value in textbox 2 should also be removed, if i will select terms1 in tab1 then again i will go to tab2 and i will enter some value in text box, this value is valid till tab2 is enabled, if i will come to tab1 and will select a different item then tab2 will be disabled and the entered value in text box will be removed. I think just slight modification is required in your fiddle..please show me ashfaq...I need your help

harry Over a year ago

ya textbox value is being removed but tab1 becomes disabled when i am going to tab2 through drop down menu selection in tab1. Please have a look at your fiddle. As textbox value is being removed in tab2 after disabled, similarly please select option should come in tab2 after disabled. If i am selecting terms 2 in tab1 then i am going to tab2 and if i selected terms2 then i am going to tab3 , now i came to tab1 and i selected terms2 then tab2 is disbaled and entered value in textbox is removed (if any) like this combo box value should also be removed and show show Please Select option in tab2.

harry Over a year ago

Another stuff is in tab2 if i am selecting please select option then it should not come to tab1, it should remian in that tab2. Please help me by showing a fiddle

|

Collectives™ on Stack Overflow

enable/disable tabs based on drop down menus selection

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related