Question

I’m working on a asp.net mvc3 application. I have a @Html.DropDownList("abcd") and a @Html.CheckBox("efgh").

What I want:

If a defined option of the DropDownList will selected, the CheckBox should be disabled.

I think of sth. like that:

@if "defined option" is chosen of DropDownList("abcd") {
    disable checkbox("efgh")

I’ve already found out how to disable a checkbox:

@Html.CheckBox("efgh", new { disabled = "disabled" })

As you can see, I’m using razor

Thanks in advance!! You guys doing a great job here 🙂

Answer 1

I think of sth. like that:

No, you should be thinking of a javascript function because the changes on the dropdown occur on the client, not on the server. So basically you need to sibscribe to the onchange event of your dropdown, read the selected value and based on this value toggle the checkbox disability state.

For example if you are using jQuery this might look something like this:

$(function() {
    $('#abcd').change(function() {
        var disabled = this.value == 'defined option';
        $('#efgh').prop('disabled', disabled);
    });
});

In my example abcd is obviously the id of your dropdown and efgh the id of your checkbox. So make sure you they are correct and match your actual values.

Oh and as a sidenote I don’t forget that if you disable an HTML input element, its value will never be sent to the server when the form is submitted. If you still want the value to be submitted to the server while the input cannot be modified you probably want to make it readonly instead of disabling it.

var readonly = this.value == 'defined option';
$('#efgh').prop('readonly', readonly);