removeAttr doesn't remove disabled attribute in Firefox

Question

I have the following code that unlocks the dropdown by removing the disabled attribute with the removeAttr function. This example doesn't work in Mozilla Firefox 24 for Ubuntu. However it works perfectly fine if added an alert after the RemoveAttr function as shown in the next example:

        $("#dropdown1").change(function() {
        $('#dropdown2').find('option').remove().end();
        if (obj[$(this).val()] !== undefined)
        {

            $('#dropdown2').removeAttr('disabled');
            $('#dropdown2').append('<option></option>' + obj[$(this).val()]);
            $('#dropdown2').attr('required', true);
        }
        else
        {
            $('#dropdown2').attr('disabled', true);
            $('#dropdown2').attr('required', false);
        }

    });

Working example:

        $("#dropdown1").change(function() {
        $('#dropdown2').find('option').remove().end();
        if (obj[$(this).val()] !== undefined)
        {

            $('#dropdown2').removeAttr('disabled');
            alert("REMOVED");
            $('#dropdown2').append('<option></option>' + obj[$(this).val()]);
            $('#dropdown2').attr('required', true);
        }
        else
        {
            $('#dropdown2').attr('disabled', true);
            $('#dropdown2').attr('required', false);
        }

    });

Example with .prop doesn't work as well:

        $("#dropdown1").change(function() {
        $('#dropdown2').find('option').remove().end();
        if (obj[$(this).val()] !== undefined)
        {
            $('#dropdown2').prop('disabled', false);
            $('#dropdown2').append('<option></option>' + obj[$(this).val()]);
            $('#dropdown2').attr('required', true);

        }
        else
        {
            $('#dropdown2').prop('disabled', true);
            $('#dropdown2').attr('required', false);
        }

    });

There is great documentation about .attr() method... `To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.` Just FYI, don't use removeProp() to replace removeAttr(), set property to false instead — A. Wolff, Sep 26 '13 at 13:51
If the problem remains you should create a http://jsfiddle.net reproducing this problem — Itay, Sep 26 '13 at 14:02
All right, it looks like the Select2 plugin is messing up with those dropdowns. As soon as removed, everything works fine. — user1029829, Sep 26 '13 at 14:46
http://jsfiddle.net/DcunN/7/ When you remove the Select2 from javascript, it unblocks the second dropdown with no problems. — user1029829, Sep 26 '13 at 15:10

score 4 · Accepted Answer · answered Sep 26 '13 at 13:48

4

You should use .prop() to set the disabled property status

to enable

$('#dropdown2').prop('disabled', false);

to disable

$('#dropdown2').prop('disabled', true);

Read: Attributes vs. Properties

answered Sep 26 '13 at 13:48

Arun P Johny

384,651
66
527
531

1

Same thing, still doesn't work: $("#dropdown1").change(function() { $('#dropdown2').find('option').remove().end(); if (obj[$(this).val()] !== undefined) { $('#dropdown2').prop('disabled', false); $('#dropdown2').append('' + obj[$(this).val()]); $('#dropdown2').attr('required', true); } else { $('#dropdown2').prop('disabled', true); $('#dropdown2').attr('required', false); } }); – user1029829 Sep 26 '13 at 13:56

Itay · Answer 2 · 2013-09-26T13:54:45.650

3

From the (documentation](http://api.jquery.com/attr/#entry-longdesc):

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

So you should use the .prop() function instead.

$('#dropdown2').prop('disabled', false); // Enables the element
$('#dropdown2').prop('disabled', true ); // Disables the element

edited Sep 26 '13 at 13:54

answered Sep 26 '13 at 13:48

Itay

16,601
2
51
72

1

Same problem. Doesnt work – user1029829 Sep 26 '13 at 14:21
@user1029829 If the problem remains you should create a jsfiddle.net reproducing this problem – Itay Sep 26 '13 at 14:21

Anirudha Gupta · Answer 3 · 2013-09-26T13:51:02.310

1

use prop

$('#dropdown2').prop('disabled', false);

disable true make disable the element and disable false Enable the element

edited Sep 26 '13 at 13:51

answered Sep 26 '13 at 13:49

Anirudha Gupta

9,073
9
54
79

1

Same problem. Doesn't work. – user1029829 Sep 26 '13 at 14:21

removeAttr doesn't remove disabled attribute in Firefox

3 Answers3