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" value = 'test' >
</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" value = '123456'>
</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
$(function(){
var $input = $('input:not(:checkbox)'),// Check box is having some value even when not checked so ommitting it.
$register = $('button:submit');
$register.attr('disabled', !isFilledForm());
$input.keyup(function() {
$register.prop('disabled', !isFilledForm())
});
function isFilledForm(){
var isFilled = true;
$input.each(function(){
if(!$(this).val()) isFilled = false;
})
return isFilled
}
})