JSFiddle - React, Tailwind, and code Playground

HTML

<li><input type="text" id="input1"></li>
<li><input type="text" id="input2" class=disabled></li>

CSS

.disabled {background: #ccc;}

JavaScript

$('#input1').change(function(){
    if($(this).val().trim().length != 0){
        $('#input2').removeClass('disabled').focus();
    }
});


$(function(){
  // disable keypresses on "disabled" input
  $('.disabled').keypress(function(e){
    e.preventDefault;
    e.stopPropagation;
    return false;
  });
  // doesn't allow to focus
  $('.disabled').focus(function(e){
    $(this).blur();
  });
});