JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label for="txtusername" class="col-sm-4 control-label">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="txtusername" name="txtusername" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="txtpassword" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="txtpassword" name="txtpassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<div class="checkbox">
<label><input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" id="signin" class="btn btn-default" >Sign in</button>
</div>
JavaScript
$.fn.extend({
has_value: function() {
return this.filter( function() {
return $( this ).val().length == 0;
}).length;
}
});
var $input = $( 'input.form-control' ),
$register = $('#signin');
$input.on( 'change keyup', function() {
$register.prop( 'disabled', $input.has_value() );
});
$input.trigger( 'change' );