CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvccheckbox
AMeh
AMeh

Reputation: 211

jquery checkbox :checked is not working

I have a view in MVC application which accesses model data like this,

<tbody>
@foreach (var item in Model)
{
        <tr>
            <td class="details-control" style="text-align: center; vertical-align: middle">
                @Html.DisplayFor(modelItem => item.ProductName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NoOfProducts)
            </td>
            <td>
                @Html.CheckBoxFor(modelItem => item.IsEnabled.Value, new {id = "chkIsEnabled", onclick = "EnableDisableProduct(" + item.ProductId + ")"})
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)</td>
            </td>
            <td>
                <a class="btn icon-btn btn-primary" href="@Url.Action("Index", "Home", new
                    {
                        ProductId = item.ProductId
                    })">
                <span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-primary"></span>
                </a>
            </td>
        </tr>
}
</tbody>

Below is my JavaScript function,

function EnableDisableProduct(ProductId) {
    if ($("#chkIsEnabled").is(':checked')) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

I have 5 checkboxes in my table so when I check/uncheck on the first checkbox, it works perfectly. But when I check/uncheck rest of the checkboxes, it keeps displaying checked or unchecked based on last click.

For example, 

 1st checkbox checked   - "checked" alert box,
 2nd checkbox checked   - "checked" alert box,
 1st checkbox unchecked - "unchecked" alert box,
 3rd checkbox checked   - "unchecked" alert box,
 4th checkbox checked   - "unchecked" alert box

I don't know what I am doing wrong here.

Upvotes: 0

Views: 1315

Answers (2)

user3559349
user3559349

Reputation:

You have invalid html (duplicate id attributes) and your $("#chkIsEnabled") selector will only ever select the first element with id="chkIsEnabled"

Change you checkboxes to use class names instead

@Html.CheckBoxFor(m => item.IsEnabled.Value, new { @class = "chkIsEnabled" })

$(".chkIsEnabled").click(function() {
    if ($(this).is(':checked')) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

Side note: You use of a foreach loop means that your checkboxes will not bind to you model when you submit the form. And you use of IsEnabled.Value suggests the property is a nullable boolean which means it still will no bind even if you use a for loop or EditorTemplate

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Element Id must be unique. So change your template to this:

<td>
    @Html.CheckBoxFor(modelItem => item.IsEnabled.Value, new {onclick = "EnableDisableProduct(this, " + item.ProductId + ")"})
</td>

This way you actually don't need it at all:

function EnableDisableProduct(checkbox, productId) {
    if (checkbox.checked) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

Upvotes: 1

Related Questions