如何将开关控制添加到mvc应用程序？

Question

我需要将切换控件添加到我的Web应用程序中。 我试图使用Kendo Switch控件。 我想将我的开关绑定到模型属性。 我这样做的方式如下：

<div class="form-group">
    @Html.Label("Guest Mode:")
    <label class="checkbox-inline">
        @Html.CheckBoxFor(m => m.SomeProperty, new {@id = "switch"})
    </label>
</div>
<script>
    var switchInstance = $("#switch").kendoMobileSwitch();
</script>

我尝试了很多方法，但无法正常控制（请参阅我的屏幕截图）。

此外，我尝试仅使用剃刀语法，但只渲染了一个复选框。 我的问题是什么以及如何解决？ 谢谢你提前！

Answer 1

我已经做到了。目标是为某些文本字段打开/关闭“禁用”属性。就我而言，这种方式很好用。我希望它有用。 在标签标签“ for”中是使用模型属性方法的绑定。复选框由HTML帮助程序与模型绑定。

<div class="custom-control custom-switch">
            @Html.CheckBoxFor(m => m.Enabled, new { @class = "custom-control-input" })
             <label class="custom-control-label" for="Enabled">Disable</label>
        </div>

然后是jQuery脚本：

@section Scripts {
<script type="text/javascript">
    $(document).ready(DOM_Load);

    function DOM_Load(e) {
        $('[data-toggle="popover"]').popover({
            container: "body"
        });

        $("div.custom-switch").children("input").on("change", EnabledToggle_Change);
    }

    function EnabledToggle_Change(e) {
        var inputs = $("div.container-fluid").find("input[type!='checkbox']");
        var textareas = $("div.container-fluid").find("textarea");
        var switchLabel = $("div.custom-switch").children(".custom-control-label");

        switchLabel.text(switchLabel.text() == 'Disable' ? 'Enable' : 'Disable');
        inputs.prop('disabled', (i, v) => !v);
        textareas.prop('disabled', (i, v) => !v);
    }
</script>

}