CheckBoxList multiple selections: difficulty in model bind back

I am having a class as follows

 public class UserRoleModel
{
    public string Role { get; set; }
    public bool UserRole { get; set; }
}

and public UserRoleModel[] UserRoles { get; set; }

My controller is as follows:

 public ActionResult CreateUser()
     {
         UserDetailsModel model = new UserDetailsModel();
         return View(model);
     }

     [HttpPost]
     public ActionResult CreateUser(UserDetailsModel model)
     {

         return View(model);
     }

In my view I am having

    >@foreach (var item in Model.UserRoles)      
    { 

    name = "UserRoles"+ ".Value["+ i + "]"; 
    id= "UserRoles" + "_Value[" + i++ + "]";
    selected = item.UserRole ? "checked=\"checked\"" : ""; 

        <p>
        <input type="checkbox" name="@name" id="@id" @selected value="true" /> 
        <label for="@id">@item.Role</label> 
        <input type="hidden" name="@name" value="false" /> 
        </p> 
  } 

Despite the values being displayed accordingly in my view, there is no model bind back for UserRoles. What am I missing or is there any better and cleaner method?