JQuery Change Div Button State & Click Disable

Question

The following is jQuery javascript code, except that I would like to add 2 functions to the button state.

• When the user clicks one of the buttons, the other button that has not been pressed receives a new class (see).

• Both button states should change to unclickable.

[div id = "1" class = "__ button_image"] [/ div]
[div id = "2" class = "__ button_image"] [/ div]

$ ("div .__ button_image"). mouseover (function () {
    $ (this) .addClass ("__ button_image_hover");
});

$ ("div .__ button_image"). mouseout (function () {
    jq (this) .removeClass ("__ button_image_hover");
});

$ ("div .__ button_image"). click (function () { 
    $ (this) .removeClass ("__ button_image_hover");
    $ (this) .addClass ("__ button_image_clicked");

    jQuery.get ('/ do / request');        
});

Answer 1

Here is the final code I went with:

$("div.__button_image").mouseover(function () {
    $(this).addClass("__button_image_hover");
});

$("div.__button_image").mouseout(function () {
    $(this).removeClass("__button_image_hover");
});

$("div.__button_image").click(function () {

    /** change button look to 'clicked' */
    $(this).addClass("__button_image_clicked");

    /** get the id of the current button */
    b_id = $(this).attr('id');

    /** unbind both vote buttons for *no* interaction */
    $("div.__button_image").unbind('click');
    $("div.__button_image").unbind('mouseover');
    $("div.__button_image").unbind('mouseout');

    /**
     * wire the .each function to iterate the classes 
     * so we can change the look of the one that was 
     * not clicked.
    */
    $('div.__button_image').each(function() {
      button_id = $(this).attr('id');
      if(button_id!=b_id) {
         $('#'+button_id).removeClass("__button_image");
         $('#'+button_id).addClass("__button_image_gray");  

    }
});

jQuery.get('/do/request?id='+b_id); 
$(this).parent().css('cursor', 'default');

Answer 2

What is the problem? The only thing I see that you are missing is

$("div.__button_image").unbind('click');

This will remove the 'click' handler (setting its default value).

Answer 3

click() :

$("div.__button_image").click(function () { 
    $(this).removeClass("__button_image_hover");
    $(this).addClass("__button_image_clicked");

    /*
     * Add look class to all buttons, then remove it from this one
     */
    $("div.__button_image").addClass("look");
    $(this).removeClass("look");

    /*
     * Remove click handler from all buttons
     */
    $("div.__button_image").unbind('click');

    jQuery.get('/do/request');        
});

Answer 4

( 80% )

$("#buttonDivId").css({opacity: 0.8, cursor: "wait"}).prop("disabled", true);

Answer 5

JQuery UI, disable.

$("selector").button("disable");

http://api.jqueryui.com/button/