JSFiddle - React, Tailwind, and code Playground

by Biniam Asnake

HTML

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

CSS

/* Lets use a Google Web Font :) */
     @import url(http://fonts.googleapis.com/css?family=Finger+Paint);
     /* Basic CSS for positioning etc */
     body {
          font-family: 'Finger Paint', cursive;
          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 div {
          text-align: center;
          margin-bottom: 30px;
     }

JavaScript

$(function(){
     $('#submitBtn').click(function(){
		$('.enableOnInput').prop('disabled', false);
		$('#submitBtn').val('Update');
     });
});