Question

我正在使用BootStrap Switch根据Switch值显示/隐藏某些内容。当我需要确保（对于我的控制器回发）是在进行切换时，隐藏的DropDownList将其值重置为空或空。我需要确保用户只能为成员组织或赞助商选择一个值，而不是两者都选择。

然而，我似乎无法弄清楚如何在我的javascript中引用特定的DropDownList控件（对MVC开发来说仍然相当新）。有人对这件事有什么看法吗？

HTML

    <div style="margin-bottom: 15px">        
        <div class="row switchOn">
            <div class="editor-label">
                @Html.LabelFor(model => model.MemberOrgId, "Organization")
            </div>
            <div class="editor-field">
                @Html.DropDownList("OrganizationId", null, String.Empty, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.MemberOrgId)
            </div>
        </div>

        <div class="row switchOff">
            <dliv class="editor-label">
                @Html.LabelFor(model => model.SponsorOrgId, "Sponsor")
            </dliv>
            <div class="editor-field" >
                @Html.DropDownList("SponsorId", null, String.Empty, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SponsorOrgId)
            </div>
        </div>
    </div>

的jQuery

<script type="text/javascript">
    jQuery(document).ready(function () {
        setTimeout(function () { $("#alert").alert('close'); }, 5000);
        $('.switchOff').addClass('hide');

    });  
    $.fn.bootstrapSwitch.defaults.onText = 'Member';
    $.fn.bootstrapSwitch.defaults.offText = 'Sponsor';
    $.fn.bootstrapSwitch.defaults.offColor = 'info';
    $.fn.bootstrapSwitch.defaults.animate = false;

    //$.fn.bootstrapSwitch.defaults.size = 'large';
    $(document).ready(function () {
        $('input:checkbox[name="Sponsor-Organization"]').bootstrapSwitch();
    });

    $('input:checkbox[name="Sponsor-Organization"]').on('switchChange.bootstrapSwitch', function (event, state) {
        var checked = state;
        if (checked) {
            $('.switchOn').removeClass('hide');
            $('.switchOff').addClass('hide');
        }
        else {
            $('.switchOff').removeClass('hide');
            $('.switchOn').addClass('hide');
        }
    });

    $(document).ready(function () {
        $(".btn-danger").click(function () {
            var cancel = confirm("Are you sure? Entered data will be lost.")
            if (cancel != true) {
                event.preventDefault(); // cancel the event
            }
        });
    });

    //$('input:checkbox[name="Sponsor-Organization"]').on('switchChange.bootstrapSwitch', function(event, state) {
</script>

Answer 1

在每个下拉列表中添加ID，然后在我的jQuery中引用它。

    <div style="margin-bottom: 15px">        
        <div class="row switchOn">
            <div class="editor-label">
                @Html.LabelFor(model => model.MemberOrgId, "Organization")
            </div>
            <div class="editor-field">
                @Html.DropDownList("OrganizationId", null, String.Empty, new { @class = "form-control", @id = "OrgIdDropDown" })
                @Html.ValidationMessageFor(model => model.MemberOrgId)
            </div>
        </div>

        <div class="row switchOff">
            <dliv class="editor-label">
                @Html.LabelFor(model => model.SponsorOrgId, "Sponsor")
            </dliv>
            <div class="editor-field" >
                @Html.DropDownList("SponsorId", null, String.Empty, new { @class = "form-control", @id = "SponsorIdDropDown" })
                @Html.ValidationMessageFor(model => model.SponsorOrgId)
            </div>
        </div>
    </div>

<强> jQuery的：

$('input:checkbox[name="Sponsor-Organization"]').on('switchChange.bootstrapSwitch', function (event, state) {
    var checked = state;
    if (checked) {
        $('.switchOn').removeClass('hide');
        $('.switchOff').addClass('hide');
        $('#SponsorIdDropDown').val("");
    }
    else {
        $('.switchOff').removeClass('hide');
        $('.switchOn').addClass('hide');
        $('#OrgIdDropDown').val("");
    }
});

Bootstrap Switch：在更改时将特定的DropDownList设置为空白？

1 个答案: