I am trying to enable/disable dropdowns using mvc JavaScript function

Question

I'm trying to disable these dropdowns when Enable checkBox is not checked. This is my 1st go around on this and any guidance would be greatly appreciated.

Basically when the checkBox is disabled I'm trying to get the dropdown disabled. When checkBox is checked the dropdowns need to be enabled.

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>

and what precisely is going wrong? What does your debugging indicate is currently happening in the code? I see you've added some logging, so presumably you can describe the current behaviour based on that? TBH since the JS operates on HTML, it would be more useful to see an example of the final rendered HTML to go with your code, rather than the Razor source. — ADyson
– ADyson, Commented Mar 6, 2019 at 17:40
However if I had to guess maybe I'd say that because your event handler declarations are outside the "document.ready" block, then possibly they are being executed before the HTML is rendered, and therefore cannot find any elements to attach the event to. It depends where in the code your <script block is located which contains this JS. If it's after the HTML/Razor code then you should be ok, but if it's before it then you'll have the issue I've mentioned. — ADyson
– ADyson, Commented Mar 6, 2019 at 17:42

Mark Fitzpatrick · Accepted Answer · 2019-03-06 17:43:55Z

1

Since these are kendo dropdowns why not use the kendo features? First, the names should be derived from the model field. In that case, the default example for model.DeliverUserIDField would be

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

answered Mar 6, 2019 at 17:43

Mark Fitzpatrick

1,6341 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

snj013 Over a year ago

Yes @MarkFitzpatrick thank you, I was on the right track! I actually was implementing the kendo feature right after I posted this question.

Collectives™ on Stack Overflow

I am trying to enable/disable dropdowns using mvc JavaScript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related