JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<body>
  <input type="text" name="predata">
  <p>
    <input type="checkbox" class="prehora" id="hora08" value="08">
    <label for="hora08">08:00</label>
    <input type="checkbox" class="prehora" id="hora09" value="09">
    <label for="hora09">09:00</label>
    <input type="checkbox" class="prehora" id="hora10" value="10">
    <label for="hora10">10:00</label>
  </p>
  <img id="carregando" src="http://dev.cloudcell.co.uk/bin/loading.gif" />
</body>

CSS

img#carregando {
  display: none;
}

JavaScript

$(document).ready(function() {
  $("input[name='predata']").keyup(function() {
    var data = $(this).val();
    $("#carregando").show();
    $.ajax({
      url: "/echo/html/",
      type: "POST",
      data: {
        html: data,
        delay: 0
      },
      cache: false,
      success: function(consulta) {
        var horarios = [];
        if (parseInt(consulta) % 2 == 0) horarios.push("08");
        if (parseInt(consulta) % 3 == 0) horarios.push("09");
        if (parseInt(consulta) % 5 == 0) horarios.push("10");
        $("input[type='checkbox']").val(horarios);
        $("#carregando").hide();
      }
    });
  });
})