jQuery addClass example

Change class name on click in jQuery

by alachgar

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
		
		
		
		<!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->		
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">		
		<!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->	
		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>


<div>
  Phone  : <input type="text" id="phone" class="form-control" /><br >
  Email : <input type="text" id="email" class="form-control" /><br>
  Housing Type : <input type="text" id="housing_type"  /><br>

  
  Housing Type : 
  <input type="radio" name="preferred"  disabled />Rent
  <input type="radio" name="preferred"  disabled />Own
   <input type="radio" name="preferred"  disabled />Unsh
    

  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('input[type="text"], input[type="radio"]').bind('blur', function(e) {

  if($('#phone').val().length > 0 || $('#email').val().length > 0 || $('#housing_type').val().length > 0) 
  {
  
    $('input[type="radio"]').prop('disabled', false);  
    
  }
  else 
  {
    $('input[type="radio"]').prop('disabled', true);  
  }
  
});