How to add checked attribute of checkbox in MVC?

Question

I have a checkbox and when I press it, I need to add checked attribute to cshtml.

When I deselect the checkbox, I need to remove this attribute. How can I do it?

Now, when I press it, nothing is happens. I need to change the value of Checked variable somehow.

View model:

public class ListProductVM
{
    public int Id { get; set; }
    public bool Checked { get; set; }
}

.cshtml page:

    <div class="compare-checkbox form-checkbox">
        <input name="compare-@Model.Id" class="js-favorite-checkbox" type="checkbox" @(Model.Checked ? "checked" : "") data-product-id="@Model.Id">
    </div>

score 1 · Answer 1 · answered Apr 21 '20 at 08:35

You should use jquery/javascript for this. Add this to your page

 <script>

    $('.js-favorite-checkbox').change(function() {
        if(this.checked) {
            this.setAttribute('checked', 'checked');
        }
        else
        {
            this.removeAttribute("checked"); 
        }
    });

 </script>

Hooman Bahreini · Accepted Answer · 2020-04-21T23:32:39.790

0

You can try CheckBoxFor HTML helper:

@model ListProductVM

<div class="compare-checkbox form-checkbox">
    @Html.CheckBoxFor(m => m.Checked, new { @class="js-favorite-checkbox", @data_product_id="@Model.Id" })
    @Html.LabelFor(m => m.Checked)
</div>

Note that data_product_id will be rendered as data-product-id in the html file: more info here

Here is a demo

edited Apr 21 '20 at 23:32

answered Apr 21 '20 at 07:20

Hooman Bahreini

14,480
11
70
137

Whith this code I don't see the checkbox and attribute when I press on the checkbox – Amazing User Apr 21 '20 at 07:44
the checked attribute doesn't seem to be added in your solution. – Husain Alhamali Jun 27 '22 at 09:50
@HusainAlhamali: What do you mean it does not work!? I have linked a working demo in the answer... – Hooman Bahreini Jun 27 '22 at 22:46

How to add checked attribute of checkbox in MVC?

2 Answers2