ASP.NET MVC disable dropdownlist on page load

Question

I'm using ASP.NET MVC 4 and jQuery to achieve this.

What I'm trying to do is to disable or enable a dropdownlist based on if a checkbox is checked or not.

I can get this working, however I can't seem to disable the dropdownlist on pageload. the statement is executed, but the element is not disabled.

What I think the problem is, is that the check is performed, BEFORE the dropdownlist (from the viewmodel) is populated, and the data somehow overrides?

Here's my HTML:

<p>
    @Html.CheckBoxFor(model => model.RoomRequired, new { id= "room-required" })
    <label>Room Required</label>
</p>
<p>
    <label>Room Options</label>
    @Html.DropDownListFor(model => model.OptionId, new SelectList(Model.RoomOptions, "Id", "Name"), "Select option", new { id="option-select })
</p>

and fixed Javascript:

$(document).ready(function () {    
    $('#room-required').change(function () {
     $('#option-select').prop('disabled', $(this).is(':checked'));
    });

    $('#room-required').trigger('change');
});

>> What I think the problem is, is that the check is performed, BEFORE the data (from the viewmodel) is loaded into the page, and de data somehow overrides the attribute? This is not a reason, data loaded from viewmodels on server side but javascript works on client side. — STO
– STO, Commented Jun 12, 2013 at 8:24

MrCode · Accepted Answer · 2013-06-12 08:29:55Z

3

.prop() is preferred for changing the disabled property, and you can pass it a boolean, so your code could be simplified to:

$('#option-select').prop('disabled', $('#room-required').is(':checked'));

Or full code:

$(document).ready(function () {    
    $('#room-required').change(function () {
         $('#option-select').prop('disabled', $(this).is(':checked'));
    });

    $('#room-required').trigger('change');
});

Fiddle

edited Jun 12, 2013 at 8:29

answered Jun 12, 2013 at 8:22

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

7 Comments

Ruudt Over a year ago

That's a much cleaner solution, thanks! Also lol at myself for writing another if/else statement, while I could just trigger the event. But unfortunately, this hasn't solved the problem; the dropdownlist is still enabled on pageload.

MrCode Over a year ago

As you can see from the fiddle, the code in the answer is OK, so that means there must be something going on elsewhere on the page causing the problem, maybe a syntax error somewhere. Try refreshing the page with the console open (F12) and watch for any errors.

Ruudt Over a year ago

No errors, but the difference with your fiddle and my application is that my dropdownlist is generated and populated by razor with data from the viewmodel.

MrCode Over a year ago

That itself shouldn't make a difference because razor will be outputting a dropdown and so as far as jQuery is concerned there's no difference other than any other elements/code on the page. I would suggest doing View>Source in the browser so you get the final HTML, save it as a .html doc, and then bit by bit start removing things until all that's left is the dropdown and the code in answer. As you remove bits, re-test the page each time to see if it starts working. I appreciate this could take a while but it should lead you to the problem eventually.

MrCode Over a year ago

First of all, double check that your dropdown and checkbox have the correct IDs. If you have a public URL I will take a look.

|

Ruudt · Accepted Answer · 2013-06-17 11:00:03Z

1

I sorta of solved the problem. For some reason, jQuery was re-enabling the dropdownlist. I had to add a javascript script to the HTML page itself and trigger the change event in there. I know it's not the best solution, but it's a workaround that works for me.

answered Jun 17, 2013 at 11:00

Ruudt

8802 gold badges8 silver badges11 bronze badges

Comments

mridula · Accepted Answer · 2013-06-12 08:17:04Z

0

What attr() does is assigns the value in the second parameter to the specified attribute of the HTML element. We want <input disabled="disabled" /> and not <input disabled="true" />.

So, use -

$('#option-select').attr('disabled', 'disabled');

instead of -

$('#option-select').attr('disabled', 'true');

answered Jun 12, 2013 at 8:17

mridula

3,3113 gold badges34 silver badges58 bronze badges

1 Comment

Ruudt Over a year ago

That didn't make a difference, both 'true' and 'disabled' work, but the dropdown still isn't disabled on load.

Collectives™ on Stack Overflow

ASP.NET MVC disable dropdownlist on page load

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related