Question

Once you click to up-vote it becomes enabled, it can only be disabled by clicking the down-vote. How do I make it so that if I click to an enabled button it will become disabled.

$("a.vote_down").click(function() {
    //get the id
    the_id = $(this).attr('id');

    //the main ajax request
    $.ajax({
        type: "POST",
        data: "action=vote_down&id="+$(this).attr("id"),
        url: "votes.php",
        success: function(msg) {
            $(".vote_down").addClass("active");
            $(".vote_up").removeClass("active");
            $("span#votes_count").html(msg);
        }
    });
});

One of the links:

<a href='javascript:;' class='vote_up<?php if($liked["points"]=="1") echo " active";?>' id='<?php echo $id; ?>'>Vote Up</a>

Answer 1

Try using this as a live click event on the active class. Added some abstraction.

$("a.vote_down.active").live("click", function(e) {
    Vote($(this).attr('id'), false);
});

$("a.vote_up.active").live("click", function(e) {
    Vote($(this).attr('id'), true);
});

function Vote(id, value) {
    //the main ajax request
    var action = value ? "vote_up" : "vote_down"
    $.ajax({
        type: "POST",
        data: "action=" + action + "&id=" + id,
        url: "votes.php",
        success: function(msg) {
            $(".vote_down").toggleClass("active", value);
            $(".vote_up").toggleClass("active", !value);
            $("span#votes_count").html(msg);
        }
    });
}

---

working example: http://jsfiddle.net/hunter/XQfgU/ (minus the AJAX)