JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id="payment" type="text">

    <div class="checkbox">
      <label><input class="campo" id="campo1" type="checkbox" value="">1</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" id="campo2" type="checkbox" value="">2</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" id="campo3" type="checkbox" value="">3</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" id="campo4" type="checkbox" value="">4</label>
    </div>

JavaScript

$( document ).ready(function() {
    $("#payment").keyup(function(){
       if($(this).val()) {
          $("#campo1").prop('disabled', true);
          $("#campo2").prop('disabled', true);
          $("#campo3").prop('disabled', true);
          $("#campo4").prop('disabled', true);
       } else {
          $("#campo1").prop('disabled', false);
          $("#campo2").prop('disabled', false);
          $("#campo3").prop('disabled', false);
          $("#campo4").prop('disabled', false);
       }
    });
});