Determine which checkboxes are checked in a list of checkboxes MVC 5 (editorfor)

Question

This may have been already answered in another thread, but I can't find a solution... so here it goes.

I have defined an enum with flags:

 [Flags]
 public enum InfarctRelatedVessel
 {
     [Description("Left anterior descending")]
     LEFT_ANTERIOR_DESC = 1<<0,
     [Description("Right coronary")]
     RIGHT_CORONARY = 1<<1,
     [Description("Left circumflex")]
     LEFT_CIRCUMFLEX = 1<<2,
     [Description("Left main")]
     LEFT_MAIN = 1<<3,
     [Description("Other")]
     OTHER = 1<<4
 };

And it is used by a model with its respective helper.

[DisplayName("Infarct related vessel")]
[UIHint("FlagsEnum")]
public InfarctRelatedVessel MyInfarctRelatedVessel { get; set; }

The view is rather simple. I display a list of checkboxes for the vessels property and I have a hidden div that I want to display when the checkbox for "other" is checked.

<div class="form-group">
    @Html.LabelFor(model => model.MyInfarctRelatedVessel, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.MyInfarctRelatedVessel)
        @Html.ValidationMessageFor(model => model.MyInfarctRelatedVessel)

        <input type="hidden" id="InfarctVessels" />
    </div>
</div>
<div class="well well-sm" id="DivOtherVessel">
    @Html.LabelFor(model => model.MyOtherInfarctRelatedVessel, new { @class = "control-label col-md-4" })
    <div class="col-md-8">
        @Html.EditorFor(model => model.MyOtherInfarctRelatedVessel)
        @Html.ValidationMessageFor(model => model.MyOtherInfarctRelatedVessel)
    </div>
</div>

I am struggling with a jquery script that will detect when the user checks the "other" checkbox and display the hidden div

Thoughts?

Answer 1

This should do what you require:

$("input:checkbox[name='@Html.NameFor(m => m.MyOtherInfarctRelatedVessel)']").change(function(){
    var anyChecked = false;
    $("input:checkbox[name='@Html.NameFor(m => m.MyOtherInfarctRelatedVessel)']").each(function(){
        if($(this).is(":checked")) anyChecked = true;
    });
    if(anyChecked){
        // show hidden div
    }
});