jQuery change class on click of Checkbox Working After Several Clicks

I have set the following jQuery code:

$('#check').change(function(){
if (this.checked){
$('#check').click(function() {
$("#rk").addClass('disabled', this.checked);
$("#rkBtn").removeClass('disabled', this.checked);
});
} else {
$("#rk").removeClass('disabled', this.checked);
$("#rkBtn").addClass('disabled', this.checked);
}   
});

<script src="http://ift.tt/1oMJErh"></script>

<div class="field text-left">
<label class="text-left">Rk</label>
<input type="text" id="rk" class="rk" name="rk" placeholder="00.00.00 - 000.00" onkeyup="showHint(this.value,'rk')" />

</div>
<div class="field">
<input id="check" type="checkbox" name="checkbox"/>
<label class="title-checkbox">Tick this Checkbox.</label>
</div>
<div class="field">
<div class="col-lg-12 col-sm-12 col-xs-12" style="">
<a href="#" id="rkBtn" class="btn disabled"Next Step</a>
</div>
</div>

What I'm trying to achieve is to remove or add a class on click of the checkbox. At the same time when checkbox is clicked, I'm disabling the input field above it. Strangely enough it works, but only after I click on the checkbox on the fourth time.

Can you help please?