Disable and enable button alternately

Question

I have two buttons but I need to Disable and enable these two buttons alternately. So when I click buttonx it will be disabled and buttony will be enabled, then when I click buttony it will be disabled and buttonx will be enabled again, but in my code it not working.

<script>
$(document).ready(function() {
    $("#buttonx").click(function() {
        $('button').attr('disabled','disabled');
        });

    $("#buttony").click(function() {
        $('button').removeattr('disabled','disabled');
    });
});

Answer 1

Try this, assuming the buttons in question are the only ones with class button

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

There is also a radio alternative Making radio buttons look like buttons instead

Answer 2

A code to start with:

$(document).ready(function() {
    $("#buttonx").click(function() {
        $('#buttony').removeAttr('disabled');
        $(this).attr('disabled', 'disabled');
    });

    $("#buttony").click(function() {
        $('#buttonx').removeAttr('disabled');
        $(this).attr('disabled', 'disabled');
    });
});

Answer 3

Try this:

$(document).ready(function() {
  $("#buttonx").click(function() {
        $(this).attr('disabled','disabled');
        $('#buttony').removeAttr('disabled');
  }); 

  $("#buttony").click(function() {
      $(this).attr('disabled','disabled');
      $('#buttonx').removeAttr('disabled');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button id="buttonx">
button 1
</button>

<button id="buttony">
button 2
</button>