CODEWITHSUNDEEP
javascriptjquery
gbroke
gbroke

Reputation: 69

jquery/javascript enabling and disabling select menus. What am I doing wrong?

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!

Upvotes: 0

Views: 2847

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206169

HTML:

 <a href="#" id="enable">Click here to enable</a>

jQuery:

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

$(document).ready(function(){

    $('#selectmenu1, #selectmenu2, #selectmenu3').prop('disabled', true); 

    $('#enable').on('click',function(e){
        e.preventDefault();
        enableCoreChange();
    });    

});

demo jsFiddle

Note:
Instead of $('#selectmenu1, #selectmenu2, #selectmenu3'): starts with ^ selector:

$('select[id^="selectmenu"]').prop('disabled', false);

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359856

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.

Upvotes: 2

JaredPar
JaredPar

Reputation: 754873

The problem here is you're specifying the string 'false' instead of the boolean false. Personally I'd use removeAttr for clarity

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

Fiddle: http://jsfiddle.net/6pznn/

Upvotes: 0

Isaac Fife
Isaac Fife

Reputation: 1689

You should be using .prop() instead of .attr()

http://api.jquery.com/prop/

Upvotes: 1

Philipp
Philipp

Reputation: 1445

The attribute "disabled" does not need a value (backward compatibility) as soon as this attribute is available, it is disabled.

To activate it again use this function:

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

Upvotes: 1

Related Questions