JSFiddle - React, Tailwind, and code Playground

by queryj

HTML

<form name="test">Box One
    <input name="boxone" type="text" id="boxone" />Box Two
    <input name="boxtwo" type="text" id="boxtwo" />
</form>

JavaScript

$(document).ready(function () {

      $("#boxone").focus(function () {

          if ($('#boxtwo').val() != '')

          $('#boxone').prop('disabled', true);
          else $('#boxone').prop('disabled', false);
      });

      $("#boxtwo").focus(function () {

          if ($('#boxone').val() != '')

          $('#boxtwo').prop('disabled', true);
          else $('#boxtwo').prop('disabled', false);

      });

      $('#boxone').change(function () {
          if ($(this).val() == '') {
              $('#boxtwo').prop('disabled', false);
          } else {
              $('#boxtwo').prop('disabled', true);
          }

      });

      $('#boxtwo').change(function () {
          if ($(this).val() == '') {
              $('#boxone').prop('disabled', false);
          } else {
              $('#boxone').prop('disabled', true);
          }

      });




  });