Question

我发现我的自我使用jQuery steps和bootstrap toggle有一种非常奇怪的行为。我真的不知道两者之间是否存在任何联系，但我知道如果您要在jQuery steps内使用jQuery插件/扩展程序，至少会遇到很多css问题。< / p>

我按ajax加载内容，并使用partial views

使用@Html.Render()

我的问题：如果我没有使用html markup加载包含toggles ajax的{{1}}，而是将toggle inputs的代码放在（部分）视图中toggles赢了＆＃39;工作。它们显示正确但只是对任何输入都没有反应。

如果我使用ajax，则toggles无法在未按javaScript初始化的情况下正确显示。如果我这样做，他们会工作，但我不想总是使用ajax加载我的内容。

以下是partial view的代码：

<div class="form-horizontal">
    <div class="form-group">
        <div class="col-md-2">
        </div>
        <div class="col-md-6">
            <div class="checkbox">
                <label>
                    <input id="course" data-toggle="toggle" name="Rate.OfferingRates"  type="checkbox" >
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div id="offeringRateContainerSubscription">
            <div class="col-md-2">
            </div>
            <div class="col-md-6">
                <div class="checkbox disabled">
                    <label>
                        <input id="subscription" disabled data-toggle="toggle" name="Rate.OfferingRates"  type="checkbox" value="@SlRateBaseTypes.Subscription">
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        // reached 2 times using @Html.Render()
        debugger;
        $('#course').bootstrapToggle({
            on: 'Ja',
            off: 'Nein'
        });

        $('#subscription').bootstrapToggle({
            on: 'Ja',
            off: 'Nein'
        });

        $('#course').change(function () {
            debugger;
            var isCourse = $('#course').filter(":checked");
            if (isCourse.length) {
                $('#subscription').bootstrapToggle('enable');
                $('#subscription').parent().parent().parent().removeClass('disabled');
            } else {
                $('#subscription').bootstrapToggle('off');
                $('#subscription').bootstrapToggle('disable');
                $('#subscription').parent().parent().parent().addClass('disabled');
            }
        });
    });
</script>

此外：我在此debugger MyPartialView 中的javaScript中放置了partial view标记，用于初始化toggles

debugger标记在按ajax加载时会中断两次。我不知道这是怎么回事。我也不知道这是不是一个问题。

Answer 1

我刚刚找到问题的解决方案。

jQuery步骤再次在内部呈现。替换.js文件中的代码，如中所示 https://github.com/rstaib/jquery-steps/issues/42 为我工作！

使用bootstrap切换

1 个答案: