How to bind MVC .net core checkbox with label as button

Question

I have the following code which creates a checkbox that looks like a toggle button.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
 <label asp-for="FlaggedStatus" class="btn btn-outline-danger">
   <input asp-for="FlaggedStatus" type="checkbox"> Flag Address
 </label>
</div>

Which looks like this on the form unchecked:

and then like this when selected:

The binding works great for saving data. But when I load the form with data already entered, for edit mode, the checkbox is selected in the background, but the button does not show as filled in. So how do I bind it so the button will show as toggled on when the checkbox data is true?

mxmissile · Accepted Answer · 2019-11-22 22:13:22Z

1

The toggle uses the active css class on the parent label. Your going to have to use some inline logic:

<label asp-for="FlaggedStatus" class="btn btn-outline-danger @(Model.FlaggedStatus ? "active")">

answered Nov 22, 2019 at 22:13

mxmissile

11.7k6 gold badges57 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brent Kilboy Over a year ago

Awesome, thanks. Just needed to add :"" to like @(Model.FlaggedStatus ? "active":"")

Collectives™ on Stack Overflow

How to bind MVC .net core checkbox with label as button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related