CODEWITHSUNDEEP
jquery
vms
vms

Reputation: 78

Links/button disabled until another button is clicked

I am looking for a way to make all the menu items on the left be disabled.

And on each of their divs, there is an Execute button and Next button. The next button needs to be disabled until the execute button is clicked.

In addition to the next button becoming enabled, the next item in the menu needs to be enabled and clickable.

Clicking the Next would go to the next item on the left menu also.

Javscript:

// nav
$(".nav-content").hide();
$("ul.nav li:first").addClass("active").show();
$(".nav-content:first").show();

// onclick event
$("ul.nav li").click(function() {
    $("ul.nav li").removeClass("active");
    $(this).addClass("active");
    $(".nav-content").hide();

    var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
});

HTML

<div id="wrap">

    <ul class="nav">
        <li><a href="#step1"><span>1</span> ONE</a></li>
        <li><a href="#step2"><span>2</span> TWO</a></li>
        <li><a href="#step3"><span>3</span> THREE</a></li>
    </ul>

    <div class="nav-container"> 

    <div id="step1" class="nav-content"> 
        <p>ONE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next" onclick="">Next</button>

    </div> <!-- /step1 -->

    <div id="step2" class="nav-content"> 
        <p>TWO</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step2 -->

    <div id="step3" class="nav-content"> 
        <p>THREE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step3 -->

CSS

#wrap {
    width: 100%;
}
#wrap ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 250px;
    float: left;
}
#wrap ul.nav li {
    min-height: 60px;
    background-color: #2b6ed6;
    border-bottom: 1px solid #92b4ea;
}
#wrap ul.nav li span {
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 40px;
}
#wrap ul.nav li a {
    color: #fff;
    display: block;
    padding: 20px 10px;
    text-decoration: none;
    line-height: 20px;
    position: relative;
    top: 0px;
    font-size: 99%;
}
#wrap .enabled {
}
#wrap .disabled {
}
#wrap ul.nav li a:focus {
    outline: none;
}
/*#wrap ul.nav li.active, */
 #wrap ul.nav li.active a {
    color: #000;
}
#wrap ul.nav li.active a:after {
    left: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#wrap ul.nav li.active a:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #2b6ed6;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}
#wrap .nav-container {
    float: left;
    margin: 0;
    padding: 0;
    width: 60%;
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
}
#wrap .nav-content {
    margin: 0;
    padding: 0;
}
#wrap .nav-content p {
    padding: 0 0 0 35px;
}

I've also put this at http://jsfiddle.net/XVLaX/1/

Thanks!

Upvotes: 0

Views: 2075

Answers (1)

Ruben Infante
Ruben Infante

Reputation: 3135

From what I understood of the problem, this requires a few things to be in place to make this work.

Some pre-condition changes to your existing HTML for the following JS code to work, I added IDs to the list items.

<ul class="nav">
    <li id="nav-step1"><a href="#step1"><span>1</span> ONE</a></li>
    <li id="nav-step2"><a href="#step2"><span>2</span> TWO</a></li>
    <li id="nav-step3"><a href="#step3"><span>3</span> THREE</a></li>
    <li id="nav-step4"><a href="#step4"><span>4</span> FOUR </a></li>
    <li id="nav-step5"><a href="#step5"><span>5</span> FIVE</a></li>
    <li id="nav-step6"><a href="#step6"><span>6</span> SIX</a></li>
    <li id="nav-step7"><a href="#step7"><span>7</span> SEVEN</a></li>
    <li id="nav-step8"><a href="#step8"><span>8</span> EIGHT</a></li>
</ul>

And some pre-condition additions to your CSS, I added a disabled class to differentiate the states visually.

#csp-wrap ul.nav li.disabled a,
#csp-wrap ul.nav li.active a {
    cursor: default;
}

#csp-wrap .disabled {
    filter: alpha(opacity=50);
    opacity: .5;
}

First you will want to set up an initial state where all of the list items are disabled except for the first one, and all of the next buttons are disabled

// get all list items
var listItems = $("ul.nav li");

// disable all list items
listItems.addClass('disabled');

// enable the first list item
listItems.first().removeClass('disabled');

// disable all next buttons
$('.next').prop('disabled', true);

Set up a click handler for the execute button that enables the associated next button.

// execute click handler
$('.execute').click(function(event) {
   // Get the associated next button
    $(this).siblings('.next').prop('disabled', false);
});

Create a click handler for the next button to handle moving on to the next step.

// next click handler
$('.next').click(function(event) {
    // get the associated nav item
    var navId = '#nav-' + $(this).parents('.nav-content').attr('id');
    // enable the next list item
    $(navId).next().removeClass('disabled');
    // trigger click on the next list item to step to it
    $(navId).next().trigger('click');
});

Lastly, modify the onclick event to not consider the active or any disabled list items.

// onclick event
$("ul.nav").on({
    click: function () {
        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
        $(".nav-content").hide();

        var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
    }
}, 'li:not(.disabled,.active)');

You can try it out in the forked fiddle here: http://jsfiddle.net/UZwqx/3/

Upvotes: 2

Related Questions