JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id='frame'>
        <div class='search'><h1>jQuery Enable and Disable button</h1>
            <form method='post'>
                <input type='text' name='searchQuery' id='searchInput' />
                <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
            </form>
        </div>
</div>

<!-- https://www.mimuw.edu.pl/~ben/Zajecia/www2015/jquery-slides.html -->

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* Basic CSS for positioning etc */

body {
  font-family: 'Montserrat', sans-serif;
  background-image: url('bg.jpg');
}

#frame {
  width: 700px;
  margin: auto;
  margin-top: 125px;
  border: solid 1px #CCC;
  /* SOME CSS3 DIV SHADOW */
  -webkit-box-shadow: 0px 0px 10px #CCC;
  -moz-box-shadow: 0px 0px 10px #CCC;
  box-shadow: 0px 0px 10px #CCC;
  /* CSS3 ROUNDED CORNERS */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background-color: #FFF;
}

#searchInput {
  height: 30px;
  line-height: 30px;
  padding: 3px;
  width: 300px;
}

#submitBtn {
  height: 40px;
  line-height: 40px;
  width: 120px;
  text-align: center;
}

#frame h1 {
  text-align: center;
}

#frame form {
  text-align: center;
  margin-bottom: 30px;
}

JavaScript

$(function() {
  $('#searchInput').keyup(function() {
    if ($(this).val() == '') {
      $('.enableOnInput').prop('disabled', true);
    } else {
      $('.enableOnInput').prop('disabled', false);
    }
  });
});