Sequential Unbind/Bind Click

Question

I have 5 div classes (button1, button2, button3, button4, button5)

What I want is that all classes are not clickable onload (except button1) and then after button1 is clicked, button2 is active and the others are not and so on.

So a sequential click through of sorts.

HTML

<map name="Map" id="Map"> 
  <area id="button" title="HAT" alt="HAT" href="#" shape="poly" coords="xxx,xxx" /> 
  <area id="button2" title="SUN CREAM" alt="SUN CREAM" href="#" shape="poly" coords="xxx,xxx" /> 
</map>

I tried:

$(function(){ $("#button2").unbind("click"); });

as the initial function, and then under button1 click function:

$("#button1").click(function() { 
$("#Map #button2").bind("click");
});

This works in that it doesnt allow button2 to be clicked, but even after clicking button1 it still cannot be clicked.

Any ideas?

Answer 1

In more generalized and constructive approach, implementing jQuery plugin:

$("#button1").sequence("click")
    .handle(function () {
        alert("YOU...")
    })
    .handleNext("#button2", function () {
        alert("SHALL...")
    })
    .handleNext("#button3", function () {
        if (prompt("NOT PASS!!!") != "I'm Frodo, drunkie!") {
            alert("BZZZZZZZT!");
            return this.runBackward();
        }
        alert("Ah, oh, okaay...");
    })
    .handleNext("#button4", function () {
        alert("Pwned! ]:-}");
        this.resetSequence();
    });

$(function () {
    $("#button1").sequence("click")
        .handle(function () {
            alert("YOU...")
        })
        .handleNext("#button2", function () {
            alert("SHALL...")
        })
        .handleNext("#button3", function () {
            if (prompt("NOT PASS!!!") != "I'm Frodo, drunkie!") {
                alert("BZZZZZZZT!");
                return this.runBackward();
            }
            alert("Ah, oh, okaay...");
        })
        .handleNext("#button4", function () {
            alert("Pwned! ]:-}");
            this.resetSequence();
        });

});

(function ($) {
    $.fn.sequence = function (event) {
        this.sequencer = {
            event: event,
            plugged: this,
            disable : function (element, enable) {
                $(element).attr("disabled", (enable !== false) ? "disabled" : false);
            },
            disablePrev: function (enable) {
                if (this.prevInSequence)
                    this.disable(this.prevInSequence, enable);
            },
            disableNext: function (enable) {
                if (this.nextInSequence)
                    this.disable(this.nextInSequence, enable);
            },
            hasPrev : function (prev) {
                this.prevInSequence = prev;
            },
            hasNext : function (next) {
                this.nextInSequence = next;
                this.plugged.resetSequence();
            },
            process : function (callback, event) {
                this.disablePrev();
                if (callback.call(this.plugged, event) === false)
                    return;
                this.disable(this.plugged);
                this.disableNext(false);
            },
            reset: function () {
                this.disablePrev(false);
                if (this.nextInSequence)
                    this.nextInSequence.sequencer.reset();
                this.disable(this.plugged);
            }
        };

        this.resetSequence = function () {
            this.sequencer.disable(this, false);
            this.sequencer.disableNext(this);

            if (this.sequencer.prevInSequence)
                this.sequencer.prevInSequence.resetSequence();
        }

       this.handle = function (callback) {
            var self = this;
            this.on(this.sequencer.event, function (e) {
                if (self.attr("disabled"))
                    return;
                self.sequencer.process.call(self.sequencer, callback, e);
            });
            return this;
        }
        this.handleNext = function (selector, callback) {
            var next = $(selector);
            var sequence = next.sequence(this.sequencer.event).handle(callback);
            this.sequencer.hasNext(next);
            sequence.sequencer.hasPrev(this);
            return sequence;
        }
        this.runBackward = function () {
            this.sequencer.reset();
            return false;
        }

        return this;
    }
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <button id="button1">1</button>
  <button id="button2">2</button>
  <button id="button3">3</button>
  <button id="button4">Finish</button>

Answer 2

You have to do like Document

$(document).ready(function(){
    $(".btn").unbind("click",function(){
      alert("unbind click");
    });
  
});

function btnClick(thisObj){
    //unbind all not current
     $(".btn").not(thisObj).unbind("click");
     //bind next btn
     $(thisObj).next().bind("click",function(){
      alert("bind click");
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" name="btn1" value="1" onclick="btnClick(this);">
<input type="button" class="btn" name="btn2"  value="2"  onclick="btnClick(this);">
<input type="button" class="btn" name="btn3"  value="3"  onclick="btnClick(this);">
<input type="button" class="btn" name="btn4"  value="4"  onclick="btnClick(this);">
<input type="button" class="btn" name="btn5"  value="5"  onclick="btnClick(this);">

Answer 3

Try this: You can disable the clicked button and enable the next button, see below code

$(document).ready(function(){
    $('#Map').find('area').not('#button').attr('disabled',true);
    $('#Map area').on("click",function(){
        $(this).attr('disabled',true);
        $(this).next('area').removeAttr('disabled');
    }); 
});