How to set bootstrap checkbox in razor CheckBoxFor()

Question

I want to use bootstrap styled checkbox in my asp .net mvc form, however I find it very difficult. After hours looking for solution, I couldn't find anything that works for me.

Here is my HTML razor code, however checkbox doesn't show.

                 <div class="form-group">
                    @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(model => model.IsSynchronize)
                        </div>
                    </div>
                </div>

Here is rendered HTML :

<div class="checkbox">
<input data-val="true" data-val-required="Pole Synchronizacja jest wymagane." id="IsSynchronize" name="IsSynchronize" type="checkbox" value="true">
<input name="IsSynchronize" type="hidden" value="false">
</div>

How can I setup this simple thing in my form?

What do you mean - doesn't show? Check with F12 in browser that you have input type="checkbox" in your rendered html — teo van kot
– teo van kot, Commented Mar 9, 2017 at 11:54
Doesn't show - checkbox icon cannot be seen, however when You put mouse over place where it should be, it is there (mouse change icon to hand). — AnotherSimpleName
– AnotherSimpleName, Commented Mar 9, 2017 at 11:57
And here is element after inspect: <div class="checkbox"> <input data-val="true" data-val-required="Pole Synchronizacja jest wymagane." id="IsSynchronize" name="IsSynchronize" type="checkbox" value="true"><input name="IsSynchronize" type="hidden" value="false"> </div> — AnotherSimpleName
– AnotherSimpleName, Commented Mar 9, 2017 at 11:58
I think it is here: .checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="checkbox"]:checked + input[type="hidden"] + label::after, .checkbox input[type="radio"]:checked + label::after { font-family: "FontAwesome"; content: "\f00c"; } — AnotherSimpleName
– AnotherSimpleName, Commented Mar 9, 2017 at 12:07

AnotherSimpleName · Accepted Answer · 2017-03-20 09:56:24Z

6

This solved the issue:

                 <div class="form-group">

                     <label class="col-sm-2"></label>
                     <div class="col-sm-10">
                         <div class="checkbox">

                             @Html.CheckBoxFor(model => model.Synchronize)
                             @Html.LabelFor(c => c.Synchronize)
                         </div>
                     </div>
                 </div>

answered Mar 20, 2017 at 9:56

AnotherSimpleName

1511 gold badge1 silver badge9 bronze badges

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

Comments

Usman · Accepted Answer · 2017-03-09 14:13:47Z

its not working because of putting the class in div so add the class in checkbox like this

                <div class="form-group">
                    @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                            @Html.CheckBoxFor(model => model.IsSynchronize ,new {@class="checkbox"})
                    </div>
                </div>

btw i use icheck which are a bit fancy you just have to add

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css">

these libraries in header and in code use

 <div class="form-group">
            <div class="checkbox icheck-turquoise">
                @Html.CheckBoxFor(model => model.IsSynchronize)
                @Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })


        </div>
    </div>

djack109 · Accepted Answer · 2017-07-07 14:05:02Z

1

Under mvc a true/false checkbox based on the model value (boolean) also has a hidden field with the same name (supposedly to cater for when you don't check the box you still get a value in the Forms collection)

Its this hidden field that stops the checkbox working in bootstrap format. A bootstrap styled checkbox from what I can see will never display properly under mvc using @Html.CheckBoxFor

This is what i did to get it working

        <div class="checkbox">
            <input type="checkbox" value="@Model.propertyname" id="[same as property name]" name="[same as property name]" />
            <label for="propertyname">any label you like</label>
        </div>

Unfortunately the model isn't updated when you post the form and you have to handle that in the HttpPost'ed action

edited Jul 7, 2017 at 14:05

answered Jul 7, 2017 at 13:38

djack109

1,3933 gold badges29 silver badges46 bronze badges

Comments

Alex Young · Accepted Answer · 2019-06-07 02:09:00Z

1

I used awesome-bootstrap-checkbox, and create checkbox without text like this:

<div class="checkbox checkbox-info checkbox-circle">
    @Html.CheckBoxFor(m => m.PropertyName)
    <label for="@Html.IdFor(m => m.PropertyName)"></label>
</div>

answered Jun 7, 2019 at 2:09

Alex Young

113 bronze badges

Comments

user8196665 · Accepted Answer · 2017-06-21 22:00:17Z

0

Doesn't seem to work for me, the checkbox changes shape (the corners round) but acts as though its read only, still working on it.

Just a note to your solution, you could use the offset to keep the controls aligned which don't have labels, so remove

<label class="col-sm-2"></label>

And add col-md-offset-2 instead:

<div class="col-md-10 col-sm-offset-2">

edited Jun 21, 2017 at 22:00

answered Jun 21, 2017 at 21:53

user8196665

11 bronze badge

Collectives™ on Stack Overflow

How to set bootstrap checkbox in razor CheckBoxFor()

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related