JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://oppon.ru/sites/all/themes/pkpro/js/jquery.textchange.js"></script>


<input type="text" id="1" name="1" value="" size="12" maxlength="10" class="form-text required">
        <br />
<input type="text" id="2" name="2" value="" size="12" maxlength="10" class="form-text required">

CSS

.disabled {
    
  color: red;
}

JavaScript

jQuery('#1:not(.disabled)').bind('textchange', function (event, previousText) {
    if (jQuery(this).hasClass("disabled") == false) {
    if (jQuery(this).val().length > 0) {
          jQuery('#2').addClass('disabled').attr("readonly","readonly");
    }
    else   jQuery('#2').removeClass('disabled').removeAttr("readonly", "readonly" );
  jQuery('#2').val(jQuery(this).val());
    }
});



jQuery('#2:not(.disabled)').bind('textchange', function (event, previousText) {
alert ('Hello');    
});