Select atleast one language

by Faisal Khan Janjua

HTML

<input type="checkbox" id="english" class="test" name="checkbox"> english
<input type="checkbox" id="urdu" class="test" name="checkbox">
urdu
<input type="checkbox" id="ar" class="test" name="checkbox">
arabic

<br/>
english
<input type="text" class='validateLang english' />
<br/>
urdu
<input type="text" class='validateLang urdu' />
<br/>
arabic
<input type="text" class='validateLang ar' />

<input type="submit" value="Send" id="testcheck" />

CSS

input[type='text']{
  display:block;
  clear:both;
  border:1px solid #999;
}

JavaScript

$('.test').change(function() {
  var thisID = $(this).attr('id');
  if($(this).is(":checked")) {
    $('.'+thisID).attr('required',true);
    $('.'+thisID).css('border','1px solid #F99');
  }
  else{
    $('.'+thisID).attr('required',false);
    $('.'+thisID).css('border','1px solid #999');
  }       
});

$("#testcheck").on('click', function() {
  var t = false;
  jQuery(".test").each(function() {
    if($(this).is(":checked")) {
      t = true;
    }
  });
  if(t==false){
  	alert('one checkbox must be selected');
  }
  
  // checking which textbox is required
  jQuery(".validateLang").each(function() {
    if($(this).prop('required')){
      $(this).css('border-bottom','2px solid #F00');
    }
  });
 
  // return false of your form
});