Question

I'm trying to make jQuery tabs go to a certain tab based on if a checkbox is checked. The code I have used to advance one tab is this:

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");

    $("#tabs").tabs("option", "selected", selected + 1);
});

Then I used this to check if a certain checkbox is checked and advance to the next tab accordingly.

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected"); 

    if($("#fragment-2 input[type='checkbox'][name='1 inch Pump with Meter(includes Hose and Nozzle)']").is(':checked')){
        $("#tabs").tabs("option", "selected", selected + 3);

    }   
    else {
        $("#tabs").tabs("option", "selected", selected + 1);
    }
});

This works fine. However, after the link is clicked I want it to go back to advancing by 1. The way my code is it keeps advancing by 3. How do I reset my link back to 1? Let me know if you need more information. Thanks.

Was it helpful?

Solution

So if I understood it correctly then you are asking that if the next tab link on the pump tab is clicked it should advance by 3 if the option in question is clicked other wise it should advance by 1 like all the other next tab links. If that is so I would change the html to identify the next tab link by giving it an id like fragment2next on the pump panel so that I can isolate events for just that link. Then in the event handler if the link is clicked and the option selected advance by 3 otherwise advance by 1.

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    if($("#fragment-2 input[type='checkbox'][name='1 inch Pump with Meter(includes Hose and Nozzle)']").is(':checked') && ($(this).attr('id') == 'fragment2next')){
            $("#tabs").tabs("option", "selected", selected + 3);            
        }   
        else {
            $("#tabs").tabs("option", "selected", selected + 1);
        }
});
    });

here is a link to the updated jsfiddle http://jsfiddle.net/LE4EM/5/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top