radio button enable/disable not working as expected

Question

I am trying to switch my radio buttons either true or false using the following functionality.

But as a first click, I am not getting any response. Later on it works fine. ow to solve this issue and what is wrong here?

var switching = false;

$('button').on("click", function() {
  switching = switching == false ? switching = true : switching = false;
  console.log("switching", switching); //first click true but not works!
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Live Demo

Answer 1

You can just start from true and switch like this switching = !switching

var switching = true;

$('button').on("click", function() {
  switching = !switching
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Answer 2

Or you can do it just with one line:

$('button').on("click", function() {
    $(":radio").prop('disabled', function(){ return !this.disabled });
});

button.border { border:2px solid green; }

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

<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>Switch Me</button>