ASP.NET

<div class="col-md-offset-2 col-md-10">
    Hobbies<br />
    @for (int x = 0; x < Model.Hobbies.Count(); x++)
    {
        @Html.CheckBoxFor(p => p.Hobbies[x].IsSelected) @:  
        @Html.LabelFor(p => p.Hobbies[x].IsSelected, Model.Hobbies[x].Name) @:  
        @Html.HiddenFor(p => p.Hobbies[x].Name)
    }
    @Html.ValidationMessageFor(model => model.Hobbies)
</div>

[AtleastOne(ErrorMessage = "Select at least one checkbox.")]
public List<Hobby> Hobbies { get; set; }

public class AtleastOneAttribute : ValidationAttribute, IClientValidatable
{
    // For Server side
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            var oHobby=value as IEnumerable;

            foreach (var _object in oHobby)
            {
                Hobby _oHobby = (Hobby)_object;
                if (_oHobby.IsSelected)
                {
                    return ValidationResult.Success;
                }
            }

        }
        return new ValidationResult(ErrorMessage);
    }
    // Implement IClientValidatable for client side Validation
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
            ValidationType = "atleastonetrue",
        };
        yield return rule;
    }
}

<script type="text/javascript">

    $.validator.unobtrusive.adapters.add('atleastonetrue',  function (options) {
        //options.rules['restrictbackdates'] = { mindate: options.params.mindate };
        options.messages['atleastonetrue'] = options.message;
        alert('hello');
        alert(options.message);
    });

    $.validator.addMethod("atleastonetrue", function (value, element, param) {
        alert('hello');

        //var date = new Date(value);
        //var minDate = new Date(param.mindate);
        //return date >= minDate;
    });
</script>

<div class="col-md-offset-2 col-md-10">
                Hobbies<br>
<input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies_0__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[0].IsSelected">    
<label for="Hobbies_0__IsSelected">Reading</label>   
<input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[0].IsSelected" class="field-validation-valid"></span><input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies_1__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[1].IsSelected">    
<label for="Hobbies_1__IsSelected">Sports</label>   
<input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[1].IsSelected" class="field-validation-valid"></span><input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies_2__IsSelected" data-val-required="The IsSelected field is required." data-val="true"><input type="hidden" value="false" name="Hobbies[2].IsSelected">    
<label for="Hobbies_2__IsSelected">Movies</label>   
<input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name"><span data-valmsg-replace="true" data-valmsg-for="Hobbies[2].IsSelected" class="field-validation-valid"></span>                
            </div>

public class Product
  {
      public int ID { set; get; }
      public string Name { set; get; }
  }

  public class Hobby
  {
      public string Name { get; set; }
      public bool IsSelected { get; set; }

  }

  public class SampleViewModel
  {
      [Display(Name = "Products")]
      public List<Product> Products { set; get; }

      [AtleastOne(ErrorMessage = "Select at least one checkbox.")]
      public List<Hobby> Hobbies { get; set; }

      [Required(ErrorMessage = "Select any Product")]
      public int SelectedProductId { set; get; }

      [Required(ErrorMessage = "Select Male or Female")]
      public string Gender { get; set; }
  }

• The last row does not have the same height as the previous rows. It's off by a couple of pixels. I'm not setting the height of the grid, it's parent div or anything like that, so I don't know why this is happening.
  
  
• I want three of the columns to disappear when the browser resolution gets below a certain size (when the device is a phone used in portrait mode). When the resolution changes to trigger the style change, the data columns are hidden, but the headers are still there.