FuelUX Wizard How to disable specific steps?

Question

In my web form I am using fuelux wizard (link: http://getfuelux.com/javascript.html#wizard ) and I have different roles of people coming to this page. What I need is to be able to "disable" certain steps of the wizard based on some data I obtain at page load. I believe it will have something to do with styling of it but I haven't had any luck in finding what I need.

For example,

I have steps 1-6, and say a user comes to the page. I identify him as a Data Architect, thus I need to disable steps 4 and 6. I have a few specific roles which I need to disable certain combinations of tabs for each individual role.

Could this be done by calling some javascript for fuel ux based on what role I identify the user as in code behind? And what changes would I need to a specific step to make user not able to access it?

Edit:

Here are my steps:

    <ul class="steps">

            <li data-step="1" data-name="Documentation" class="active"><span class="badge">1</span>Documentation<span class="chevron"></span></li>
            <li data-step="2" data-name="Business"><span class="badge">2</span>Business<span class="chevron"></span></li>
            <li data-step="3" data-name="Application"><span class="badge">3</span>Application<span class="chevron"></span></li>
            <li data-step="4" data-name="Data"><span class="badge">4</span>Data<span class="chevron"></span></li>
            <li data-step="5" data-name="Infrastructure"><span class="badge">5</span>Infrastructure<span class="chevron"></span></li>
            <li data-step="6" data-name="Security"><span class="badge">6</span>Security<span class="chevron"></span></li>

     </ul>

My question really is, is there a way to disable certain data-steps from the code behind?

Answer 1

I've figured out a way to do it by declaring int arrays in my code behind, and then accessing them directly under where I initialize my array in javascript. It looks like this:

Code behind:

//Check which steps to disable
            if (role.Contains("Data"))
            {
                disabledSteps = new int[] {5, 5};
            }
            else if (role.Contains("Infra"))
            {
                disabledSteps = new int[] {4, 5};
            }
            else if (role.Contains("Security"))
            {
                disabledSteps = new int[] { 4, 4 };
            }

Then, using a javascriptserializer which I also declared in my code behind, the javascript looks like:

var disabledSteps = <%= serializer.Serialize(disabledSteps) %>;
        for(var i in disabledSteps){
            alert(disabledSteps[i]);
            $('#myWizard').wizard('removeSteps', disabledSteps[i], 1);
        }