List with Checkbox and TextBox

Question

I want to display a list with following columns:

1. Check Box
2. Label
3. TextBox

There should be an option to Select ALL check boxes. Also I require to disable some checkboxes based on requirement.

How to prepare such a list in MVC 5 with Razor?

Answer 1

In the View you can let Razor help you generate a list of checkboxes like this:

<div id="checkboxes">
    @for (int i = 0; i < 10; i++)
    {
        @:<input type="checkbox" id="@i.ToString()"/> Checkbox @(i+1)
        @:<br />
}
</div>
<br />

<input type="checkbox" id="checkall" /> Select all

You can use the same approach for the labels and textboxes. To be able to select all those checkboxes consider using javascript:

<script type="text/javascript">

function toggleCheckbox(status) {
    $("#checkboxes input").each(function ()
    {
        $(this).prop("checked", status);
    });
}

$(document).ready(function () {

    $("#checkall").prop('checked', true);

    $("#checkall").click(function () {
        var status = $("#checkall").prop('checked');
        toggleCheckbox(status);
    });
});
</script>