JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<td class="ctext" width="13%"> Reset Frequency in Months/Days
</td>
<td class="ctext" style="display:inline-block">
  <label for="frMnth" style="display:block">Month</label>
  <input type="text" class="textfield" value="" id="frMnth" name="frMnth" />
  <label for="frDays" style="display:block">Days</label>
  <input type="text" class="textfield" value="" id="frDays" name="frDays" />
</td>

JavaScript

$(document).ready(function() {
  $(document).on("blur", ".textfield", function() {
    var ele = $(this);
    if (ele.val()) {

      if (isNaN(ele.val())) {
        alert("Only numbers please");
        return false;
      }
      $(".textfield").not(this).attr("disabled", "disabled");
    } else {
      $(".textfield").removeAttr("disabled");
    }
  });
});