Question

This is pretty standard stuff here, and I cannot understand why it isn’t working.
When the enable function is called, I receive my alert but the select fields are still disabled. Any thoughts?

$(window.document).ready(function() {
    $('#selectmenu1').attr('disabled','true');
    $('#selectmenu2').attr('disabled','true');
    $('#selectmenu3').attr('disabled','true');
});

function enableCoreChange(){
    alert('called');
    $('#selectmenu1').attr('disabled','false');
    $('#selectmenu2').attr('disabled','false');
    $('#selectmenu3').attr('disabled','false');
}

The click event:

<a href="#" onclick="enableCoreChange();">Click here to enable</a>

It’s driving me crazy!

Answer 1

Pass a boolean, not a string, as the second parameter of .attr().

$(function() { // use document ready shorthand
    // combine the selectors to stay DRY
    $('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', true);
});

function enableCoreChange() {
    $('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', false);
    // alternately:
    $('#selectmenu1, #selectmenu2, #selectmenu3').removeAttr('disabled');
}

Note the other general style improvements as well.