First Name
GenderMale Female
Games Played
Terms & Condition
Button is disabled


HTML

<form method=" post" action="form-submit.php"> 
<table class='table table-striped my_table' >
<tr> <td>First Name</td> <td><input type="text" id="t1" name="FirstName"></td> </tr> 
<tr><td>Gender</td><td><input type="radio" id="r1" name="gender" value=Male>Male <input type="radio" id="r2" name="gender" value=Female>Female</td></tr> 
<tr><td>Games Played</td><td>
<select name="games" id="s1" ><option value=''>Select One</option>
<option value=Football>FootBall</option>
<option value=Tenis>Tenis</option>
<option value=cricket>Cricket</option>
</select>
</td></tr> 
<tr><td>Terms & Condition</td><td><input type=checkbox name=agree value=yes id=c1></td></tr> 
</table> 

<input type="submit" id="btnSignUp" value="Sign Up!!" /> <input type=reset id=btnReset value=Reset>
</form> 

</div><div class='col-md-6'>   <div id=my_msg>Button is disabled</div>

JavaScript

<script type="text/javascript" >
function formValidation(oEvent) { 
oEvent = oEvent || window.event; 
var txtField = oEvent.target || oEvent.srcElement; 

var t1ck=true;
var msg=" ";
if(document.getElementById("t1").value.length < 3 ){ t1ck=false; msg = msg + "Your name should be minimun 3 char length<br>";}
if(!document.getElementById("r1").checked && !document.getElementById("r2").checked){ t1ck=false;msg = msg + " Select your Gender<br>";}
if(document.getElementById("s1").value.length < 3 ){ t1ck=false;msg = msg + " Select one of the games <br>";}
if(!document.getElementById("c1").checked ){ t1ck=false;msg = msg + " You must agree to terms & conditions<br> ";}

//alert(msg + t1ck);

if(t1ck){document.getElementById("btnSignUp").disabled = false;
msg=msg+ " <b> Submit Button is enabled </b>";
 }
else{document.getElementById("btnSignUp").disabled = true; 
msg=msg+ " <b> Submit Button is disabled </b>";
}// end of if checking status of t1ck variable 
document.getElementById('my_msg').innerHTML=msg;
} 

function resetForm(){
document.getElementById("btnSignUp").disabled = true; 
var frmMain = document.forms[0]; 
frmMain.reset();
}

window.onload = function () { 

var btnSignUp = document.getElementById("btnSignUp"); 
var btnReset = document.getElementById("btnReset"); 

var t1 = document.getElementById("t1"); 
var r1 = document.getElementById("r1"); 
var r2 = document.getElementById("r2"); 
var s1=document.getElementById("s1");
var c1=document.getElementById("c1");

var t1ck=false;
document.getElementById("btnSignUp").disabled = true;
t1.onkeyup = formValidation; 
r1.onclick = formValidation; 
r2.onclick = formValidation; 
s1.onclick = formValidation; 
c1.onclick = formValidation;
btnReset.onclick = resetForm;
}
</script>

Style

<style>
.my_table {width:500px; }
#my_msg{background-color: yellow;
width:300px;
height:100px;}
</style>