javascript - 我正在尝试使用 mvc JavaScript 函数启用/禁用下拉菜单

Question

当未选中启用复选框时，我尝试禁用这些下拉菜单。这是我第一次对此进行尝试，任何指导将不胜感激。

基本上，当复选框被禁用时，我试图禁用下拉列表。当选中复选框时，需要启用下拉菜单。

js:

$(document).ready(function () {
    if ($("#userPermissions").checked) {

        enableAll();
        console.log("enableAll");
    } else {
        disableAll();
        console.log("disableAll");
    }
})

$('#userPermissions').change(function (e) {
    //console.log('change');
    if (this.checked) {
        enableAll();
        console.log('change1');
    } else {
        disableAll();
        console.log('change2');
    }
});

function enableAll() {
    $("#userSettingsBottom  :input").prop("disabled", false);
    console.log("enabled");
}
function disableAll() {
    $("#userSettingsBottom  :input").prop("disabled", true);
    console.log("disabled");
}

cshtml:

<section class="well ">
<div class="row">
    <div class="col-lg-12 gutter-0">

        <div class="row gutter-0">                
            <div class="col-sm-6 col-md-6 col-lg-8">
                <div class="box-placeholder">
                    <div>
                        @Html.Label(Resources.USERS_Settings, htmlAttributes: new { @class = "control-label", maxlength = "15", style = "font-weight: bold; font-size: 15px; display: inline;" })
                    </div><br />
                    <div>
                        @Html.Kendo().CheckBoxFor(model => model.EnableUserLogin.BoolValue).Label(Resources.Users_EnableSecurity).HtmlAttributes(new { @class = "cti-db-numvalue cti-up-EnableUserLogin", id = "userPermissions", type = "checkbox" })

                        @Html.ValidationMessageFor(model => model.EnableUserLogin, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 gutter-0">               
            <div class="col-sm-6 col-md-6 col-lg-8">
                <div class="box-placeholder">
                    @Html.Kendo().CheckBoxFor(model => model.EnableTransferOnLoginScreen.BoolValue).Label(Resources.Users_EnableTransferOnLoginScreen).HtmlAttributes(new { @class = "cti-db-numvalue cti-up-EnableTransferOnLoginScreen" })
                </div><hr />
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="row gutter-10">
            <div class="col-sm-6 col-md-6 col-lg-8">
                <div id="userSettingsBottom" class="box-placeholder" style="outline: none;">
                    <div>
                        @Html.Label(Resources.USERS_CustomFieldOption, htmlAttributes: new { @class = "control-label", style = "font-weight: bold; font-size: 14px; display: inline;" })&nbsp
                        @Resources.USERS_SelectedField
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4">
                        <div>
                            @Html.Label(Resources.Users_InboundUserIDField, htmlAttributes: new { @class = "control-label" })
                        </div>
                        @Html.Kendo().DropDownListFor(model => model.InboundUserIDField).HtmlAttributes(new { @class = "cti-db-numvalue cti-up-InboundUserIDField" })
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4">
                        <div>
                            @Html.Label(Resources.Users_DeliverUserIDField, htmlAttributes: new { @class = "control-label" })
                        </div>
                        @Html.Kendo().DropDownListFor(model => model.DeliverUserIDField).HtmlAttributes(new { @class = "cti-db-numvalue cti-up-DeliverUserIDField" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

既然这些是剑道下拉菜单，为什么不使用剑道功能呢？首先，名称应源自模型字段。在这种情况下，model.DeliverUserIDField 的默认示例将是

$("#DeliverUserIDField").data("kendoDropDownList").enable(false);