Бутстрап модальное тело

Question

im Работа с bootstrap modal-body и bootstrap-switch-container, поэтому проблема в том, что class = "bootstrap-switch-container" не работает с class = "modal-body".это просто флажок.

cshtml код

я хочу вместо кнопки переключателя.какие-либо предложения? результат

@Html.AntiForgeryToken()
<div class="modal-body">
    <div class="form-horizontal">
        @if (Model != null)
        {
            @Html.HiddenFor(model => model.FileGrossMarginID)
        }
        <div class="form-group">
            @Html.LabelFor(m => m.OperationID, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.DropDownList("OperationID", null, "", htmlAttributes: new { @class = "form-control input-circle" })
                @Html.ValidationMessageFor(model => model.OperationID, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.PriceLevelID, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.DropDownList("PriceLevelID", null, "", htmlAttributes: new { @class = "form-control input-circle" })
                @Html.ValidationMessageFor(model => model.PriceLevelID, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Value, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                @Html.EditorFor(model => model.Value, new { htmlAttributes = new { @class = "form-control input-circle" } })
                @Html.ValidationMessageFor(model => model.Value, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.IsSpecialConditions, new { @class = "control-label col-sm-3" })
            <div class="col-sm-9">
                <div class="bootstrap-switch-container">
                    @Html.EditorFor(model => model.IsSpecialConditions, new { htmlAttributes = new { @class = "make-switch" } })
                    @Html.ValidationMessageFor(model => model.IsSpecialConditions, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

для bootstrap-switch вам нужно вызвать функцию bootstrapToggle(), и вы можете ссылаться на bootstrapToggle () с другими параметрами из bootstrapToggle .

так как в вашем коде у вас нет функции bootstrapToggle() для преобразования вашего флажка в тип переключателя

для этого ваш флажок относится к классу make-switch, тогда вы можете позвонить bootstrapToggle() из своего javascript, как

$(".bootstrap-switch-container.make-switch").bootstrapToggle();

в модели вы также можете добавить переключатель, пожалуйста, посмотрите на приведенный ниже пример.

$(function() {
    $('#toggle-one').bootstrapToggle();
  })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        
<input id="toggle-one" checked type="checkbox">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>