Disabling a checkbox if a condition is met

I'm pretty new to Javascript and I have an exercise containing a form and some validation checks, I have a few inputs such as name, price, and a checkbox and I'm trying to disable the checkbox based on the price input (disable it if it's above 200 and re-enable it if it's less than 200), and at the moment it's not working, I'll really appreciate suggestions.

That's the Javascript code I've written:

document.addEventListener("DOMContentLoaded", function () {
  const price = document.querySelector("[name='purchasePrice']");
  price.addEventListener("change", checkPrice);
  function checkPrice() {
    if (price > 200) {
      document.querySelector("[name='chkBx']").disabled = true;
    } else {
      document.querySelector("[name='chkBx']").disabled = false;
    }
  }
});

and this is the HTML code:

<div class="item-div">
    <label>
      Purchase Price
      <input
        class="inputClass"
        type="number"
        name="purchasePrice"
        min="1"
        required
      />
    </label>
  </div>
  <div class="item-div">
    <label>
      Add Charge
      <input type="checkbox" name="chkBx" />
    </label>
  </div>