Question

I’m working on a asp.net mvc3 application with DropDownLists and CheckBoxes and so on.

I wrote a javascript to disable a CheckBox if a defined option of a dropdownlist is selected:

$(function() {
    $('#dropdownlistId').change(function() {
        if (this.value == '1st option') {
          $('#checkboxId').attr('disabled', disabled);
        } else {
          $('#checkboxId').removeAttr('disabled', disabled);
        }
    });
});

this works fine, but the script reacts only on a change of the dropdownlist

so if ‘1st option’ is on the top of the dropdownlist and so automatically selected as default, the script doesn’t disable the checkbox. Only if the user select another option and select ‘1st option’ once again…

Please help me 🙂

PS: the script also doesn’t work if I use my keyboard to switch the dropdownlist options instead of my mouse

So it would be very kind if you could help my to improve the script, because I really can’t do javascript :/

Answer 1

$(function() {
    var $cb = $('#checkboxId');
    $('#dropdownlistId').change(function() {
        if (this.value == '1st option') {
          $cb.prop('disabled', true);
        } else {
          $cb.prop('disabled', false);
        }
    }).trigger('change');
});

The difference in triggering change event after adding halnderl. About your second question – Using keyboard the ‘change’ event will be triggered when select will lose focus (‘blur’).