How to put a jQuery click event on a checkbox in a grid in ASP.NET MVC 2

Question

I am displaying a list of data in the following manner;

Surname Forename Email Address Email Distribution Ops Manager Sign Off Admin Inputter

<div class="pager">
    <%: Html.PageLinks(Model.PagingInfo, x=> Url.Action("List", new { page = x })) %>
</div>

and in the partial view;

   <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=Model.UserId }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=Model.UserId })%> |
            <%: Html.ActionLink("Delete", "Delete", new { id=Model.UserId })%>
        </td>
        <td>
            <%: Model.Surname %>
        </td>
        <td>
            <%: Model.Forename%>
        </td>
        <td>
            <%: Model.EmailAddress%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.EmailDistributionListFlag) %>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.OperationsManagerFlag)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.SignOffManager)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.AdministratorFlag)%>
        </td>
        <td>
            <%: Html.CheckBoxFor(x => x.InputterFlag)%>
        </td>
     </tr>

I want to put a click event on each checkbox, so when the checkbox is clicked I can do a database update. However I do not appear to have a unique client name for each checkbox. So I would like to know how to put the click event on the checkbox, and how do I know which user row has been clicked in relation to the checkbox.

Answer 1

Try to set the checkbox id this way:

Html.CheckBoxFor(x => x.EmailDistributionListFlag, new { id = "checkBoxEmailDistributionListFlag" })

And then you can access it by jquery:

$("#checkBoxEmailDistributionListFlag").click(function(){ ... });

Update:

You missed a few brackets in your js:

$(document).ready(function ()
                  {
                      $("#checkBoxEmailDistributionListFlag").click(function ()
                                         {
                                             alert("done!");
                                         }) // <-- Those were missing
                  });

And make sure you have jquery included.

Update2

To quickly create checkboxes with uniques Ids and bind a function:

Html.CheckBoxFor(x => x.EmailDistributionListFlag, new
                         {
                             id = "checkBoxEmailDistributionListFlag_" + Model.UserId,
                             onclick = "EmailClickFunc(" + Model.UserId + ");"
                         })

And you can define your EmailClickFunc in js:

<script type="text/javascript">
    function EmailClickFunc(id) { alert(id); }
</script>