Checkbox doesn't keep value with Bootstrap Collapse

时间:2018-07-24 10:16:22

标签: html asp.net-mvc twitter-bootstrap

I'm trying to use Bootstrap Collapse on a project where if a user clicks on a checkbox a text box appears for them to fill in a value and if they click the checkbox again, the text box disappears. The collapse is working fine when I click on it, the text box appears, when I click again the text box disappears. The problem I'm having is the checkbox doesn't keep its value. When I first clicked on it, it didn't seem to check at all, but the textbox toggled. Then I put a message box on the click of the checkbox. When I did that, I could see the checkbox was checked, but when I clicked ok to the messagebox, the checkbox lost its check. Is there a way the checkbox will keep its check when clicked and then when clicked again, the value change. This is the code I've used..

<a class="collapsed" data-toggle="collapse" data-parent="#payment-accordion" href="#section1">
    <div class="control-group">
        <label class="control-label">Allowed </label>
        <div class="controls">
            @Html.CheckBoxFor(model => model.Allowed, new { @class = "input-mini", @id = "allowed"})
        </div>
    </div>           
</a>

<div class="accordion-body collapse" id="section1">
    <div class="control-group">
        <label class="control-label">Salary<span class="insert-year"></span>(£)</label>
        <div class="controls">
            @Html.TextBoxFor(model => model.Salary, StringFormat.Currency, new { @class = "valueChanged", maxLength = 10 })
            <br />@Html.ValidationMessageFor(model => model.Salary)
        </div>
    </div>
</div>

Thanks in advance

1 个答案:

答案 0 :(得分:1)

您将data-toggle="collapse" data-parent="#payment-accordion"设置为标签的属性,因此,当您单击链接时,当您单击复选框时,文本框不会显示 您已将其设置为复选框。像这样

 @Html.CheckBoxFor(model => model.Allowed,  
                           new { @class = "input-mini", 
                                 @id = "allowed",
                                 data_toggle = "collapse",
                                 data_parent = "#payment-accordion"
                                })