semantic ui disable input field when checkbox toggled

I have a toggle checkbox and 2 input fields. What I want to achieve is to disable the input fields when the checkbox is unchecked, and vice versa. Here's my code.

<div class="inline fields">
  <div class="four wide field">
    <div class="ui toggle checkbox">
      <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox">
      <label>A4</label>
    </div>
  </div>
  <div class="six wide field">
    <label>Grayscale</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="gray" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
  <div class="six wide field">
    <label>Colored</label>
    <div class="ui right labeled input">
      <div class="ui label">Php</div>
      <input name="colored" value="1.00" placeholder="0.00" type="text">
      <div class="ui basic label">/page</div>
    </div>
  </div>
</div>

and the javascript

$('.ui.checkbox').checkbox();

I've researched using behaviors for checkboxes like attach events, etc or using callbacks but I don't know how to use them properly. I've also tried implementing this but I think the .next() doesn't fit my problem. I tried experimenting and researching but I can't seem to find a solution.