Disabling use of checkbox outside of calling a function

I'm creating a web based application with angular; and I'm running into an issue when dealing with check-boxes and angular. The check-boxes seem to only "half care" about the fact they are bound to a variable. As an example, I have two check boxes. One of the boxes when changed disabled the first checkbox. The first checkbox when clicked should do nothing, and remain checked. However, even though the function the first checkbox calls keeps the bound variable as true; the check box becomes unchecked. This is leading to a varying amount of other issues in my program as this is not the behavior I was expecting

Here is the html:

<label><input type="checkbox" [checked]="xChecked" (change)="xChanged()">I'm X</label>

<label><input type"checkbox" [checked]="yChecked" (change)="yChanged()">I'm Y></label>

Here is the Javascript:

xChanged(){
  this.xChecked = true;
}
yChanged(){
  this.xChecked = false;
}

With that code I expected that it would not be possible to change the "x" input without clicking the y input. The actual result is that although the y input does change the x input, simply clicking the x input will change it on it's own. This is what I mean when I say angular seems to only "half care" that the checkbox is bound to a variable.