one button active another one inactive

Question

dear all, i have two buttons inside my page. i want for the 1st time the 2nd button cant click(inactive), but we can click it after we click at the 1st button. And of course after 1st button clicked, it become inactive.

this the sequence:

button 1 ---> active
button 2 ---> inactive

then click "button 1"
button 1 --->inactive
button 2 ---> active

then click "button 2"
button 1 --->active
button 2 --->inactive

how do i do that?

Answer 1

Pseudocode:

function button1() {
    deactivateButton1();
    activateButton2();
}

function button2() {
    deactivateButton2();
    activateButton1();
}

Answer 2

Combine the onclicks below with the correct starting values in the button's disabled attribute

$('#button1').click(function(){
  $('#button2').attr('disabled','');
  $('#button1').attr('disabled','disabled');
}

$('#button2').click(function(){
  $('#button1').attr('disabled','');
  $('#button2').attr('disabled','disabled');
}

Answer 3

If you're only ever going to have two buttons, you can really just do this:

$('button').click(function(){
    $(this).attr('disabled', true).siblings('button').attr('disabled', false);

    return false;
});

See: http://jsfiddle.net/yijiang/6a2pf/

Answer 4

For inactive state try to use the property disable as follow:

$('id_button_2').disabled=false;

Then when you want to active the other button use:

$('id_button_1').disabled=true;

Remember that you have to manage this state on the event function(e.g. onclick) depends what you want