MVC 5 Html helper CheckBoxFor cannot be selected in Razor partial

So I've been given html from a digital agency that I need to convert to MVC. I understand that the Html.CheckboxFor(..) creates an additional hidden input field to capture non selection of the checkbox as false.

However on my page I can't select my checkbox. If I delete the <input type="hidden....> in Firebug I can select the checkbox. (As in I can't click on the checkbox and make it selected visually)

The generated html is:

(html provided to me)

<div class="terms well">
    <div class="checkbox">
        <label class="checkbox-inline">
            <input type="checkbox" id="authorize" name="authorize">
            <span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
            <span class="checkbox-label">I accept full responsibility for the information I provide on this form.</span>
        </label>
    </div>
</div>

(html generated by the html helper - I haven't bothered trying to use the label for as I'm not sure the styling will still work).

<div class="terms well">
    <div class="checkbox">
        <label class="checkbox-inline">
            <input type="checkbox" value="true" name="AuthorisePayment" id="AuthorisePayment"><input type="hidden" value="false" name="AuthorisePayment">
            <span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
            <span class="checkbox-label terms-credit" style="display: inline-block;">I accept full responsibility for information and authorisations I provide on this form.</span>
        </label>
    </div>
</div>

Anyone got any ideas? I'm not 100% what to include in this post to help find the answer.

The razor view contains:

<div class="terms well">
    <div class="checkbox">
        <label class="checkbox-inline">
            @Html.CheckBoxFor(model => model.AuthorisePayment)
            <span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
            <span class="checkbox-label terms-credit">@Editable(x => x.PaymentTemplate.CreditCardTerms)</span>
        </label>
    </div>
 </div>

I could just get the value from the form in my action controller but I don't understand why the model binding way of doing it isn't working.

I had the same problem. The Checkboxfor gets his name from the model. The problem is:

WHEN 2 different models have the same property, AND both have a Checkboxfor at the same page, the described problem occurs.

in my case, an organisation model (1) and a contactperson model (2) have the same property:

public bool IsActive { get; set; }

SOLUTION Give them an unique id, in my case:

(1): @Html.CheckBoxFor(model => model.IsActive).HtmlAttributes(new { id = "organisation_active" } ) (2): @Html.CheckBoxFor(model => model.IsActive).HtmlAttributes(new { id = "contact_active" } )