lundi 30 novembre 2015

jQuery get clicked checkbox from array of checkboxes with the same name/id

I have a Razor View (ASP.NET MVC) on which I have a set of pre-validations that are used to set the state of a number of checkboxes.

While the normal functioning is OK, I really want to capture the click on only one specific checkbox (rather than the whole set of checkboxes) and do a ´$.post(...)´ call.

How will I be able to achieve this? Is this even possible?

Here's (part of) my View:

    <div class="ukejuni">
    @{
        DateTime thisWeek = (DateTime)ViewData["thisWeek"];
        int thisWeekNumber = DateTimeExtender.WeekOfYearIso8601(thisWeek);
        int year = thisWeek.Year;
        string chkValue = thisWeekNumber + ";" + year;
    }
    Uke @Html.Raw(thisWeekNumber.ToString())
    @{
        switch ((DeliveryWeekType)Model.ba.delivery_week_type)
        {
            case DeliveryWeekType.EvenWeek:
                if (BusinessWeek.IsEvenWeek(thisWeekNumber)
                    && (Model.ba.deviations.Where(deviation =>
                        deviation.agreement_id == Model.ba.agreement_id
                        && deviation.week_nr == thisWeekNumber
                        && deviation.year == year
                        && deviation.delivery.HasValue
                        && (bool)deviation.delivery == true)
                    .FirstOrDefault() == null)
                )
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" checked="checked" value="@chkValue" />
                }
                else
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" value="@chkValue" />
                }
                break;
            case DeliveryWeekType.OddWeek:
                if (!BusinessWeek.IsEvenWeek(thisWeekNumber)
                       && (Model.ba.deviations.Where(deviation =>
                           deviation.agreement_id == Model.ba.agreement_id
                           && deviation.week_nr == thisWeekNumber
                           && deviation.year == year
                           && deviation.delivery.HasValue
                           && (bool)deviation.delivery == true)
                       .FirstOrDefault() == null)
                   )
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" checked="checked" value="@chkValue" />
                }
                else
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" value="@chkValue" />
                }
                break;
            default:
                if (Model.ba.deviations.Where(deviation =>
                    deviation.agreement_id == Model.ba.agreement_id
                    && deviation.week_nr == thisWeekNumber
                    && deviation.year == year
                    && deviation.delivery.HasValue
                    && (bool)deviation.delivery == true)
                    .FirstOrDefault() == null)
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" checked="checked" value="@chkValue" />
                }
                else
                {
                    <input class="leveringicon" type="checkbox" name="chkDelivery" value="@chkValue" />
                }
                break;
        }
}
</div>

And this is the script I'm using to capture (and write to the console) the value of the checkbox:

 $(document).ready(function () {
    $("input[name='chkDelivery']").change(function (e) {
        var values = $(this).val().split(';');
        console.log(values);

        if ($(this).is(':checked'))
        {
            @*$.post('@Html.Action("ChangeWeekDelivery")', {week: values[0], year: values[1], checkedState: true }, function () {

            });*@
            }
    });
});

Whenever I see the console output I'll get 8 entries with the same output (8 is the number of checkboxes on the screen):

["51", "2015"]
["51", "2015"]
["51", "2015"]
["51", "2015"]
["51", "2015"]
["51", "2015"]
["51", "2015"]
["51", "2015"]

So, how do I limit the capture event to a single item? I've tried using ´$(e.target)´ but the result is still the same.

Best Regards




Aucun commentaire:

Enregistrer un commentaire