jQuery .attr(“disabled”, “disabled”) not working in Chrome

Question

Not sure why this isn't working.

When people click the 'edit' button of my application, the disabled textfields become editable:

$("#bewerken").click(function(e)    {
    $("input[disabled='disabled']").removeAttr('disabled');
});

I then want to disable the textfields again when the user saves; I have this code bound to my save button:

$("#save_school_changes").click(function(e) {
    //stuff

    $.ajax({
        type: "POST",
        url: "/school/save_changes",
        data: { //stuff },
        success: function(data)
        {
            $("#feedback_top").html("<p>" + data['message'] + "</p>").slideDown('slow').delay(2000).slideUp();
            $("input[type='text']").attr('disabled', 'disabled');

        }
    });

    e.preventDefault();
});

As far as I know, this should disable the textfields again. However, this does not seem to be working in Chrome. It does work in Firefox. I haven't had the chance to test in IE or Safari yet. Is there any way to make this work in Chrome aswell? Thanks a lot!

Answer 1

If you are using jQuery < 1.6 do this:

jQuery("input[type='text']").attr("disabled", 'disabled');

If you are using jQuery 1.6+:

jQuery("input[type='text']").prop("disabled", true);

See this question: .prop() vs .attr() for references why.

Or you can try this:

$('input:text').attr("disabled", 'disabled');

see here for info on :text

Answer 2

For me, none of these answers worked, but I finally found one that did.

I needed this for IE-

$('input:text').attr("disabled", 'disabled');

I also had to add this for Chrome and Firefox -

$('input:text').AddClass("notactive");

and this -

<style type="text/css">
    .notactive {
        pointer-events: none;
        cursor: default;
    }
 </style>

Answer 3

It's an old post but I none of this solution worked for me so I'm posting my solution if anyone find this helpful.

I just had the same problem.

In my case the control I needed to disable was a user control with child dropdowns which I could disable in IE but not in chrome.

my solution was to disable each child object, not just the usercontrol, with that code:

$('#controlName').find('*').each(function () { $(this).attr("disabled", true); })

It's working for me in chrome now.

Answer 4

Try $("input[type='text']").attr('disabled', true);

Answer 5

Here:
http://jsbin.com/urize4/edit

Live Preview
http://jsbin.com/urize4/

You should use "readonly" instead like:

$("input[type='text']").attr("readonly", "true");

Answer 6

Have you tried with prop() ??

Well prop() seems works for me.

Answer 7

if you are removing all disabled attributes from input, then why not just do:

$("input").removeAttr('disabled');

Then after ajax success:

$("input[type='text']").attr('disabled', true);

Make sure you use remove the disabled attribute before submit, or it won't submit that data. If you need to submit it before changing, you need to use readonly instead.

Answer 8

My issue with this was that the element using the disabled attr needed to be defined as a form element, .ie input type for it to work. Both worked with attr() and prop() but chose the latter for future maintainability.

Answer 9

Mostly disabled attribute doesn't work with the anchor tags from HTML-5 onwards. Hence we have change it to ,let's say 'button' and style it accordingly with appropriate color,border-style etc. That's the most apt solution for any similar issue users are facing in Chrome . Only few elements support 'disabled' attribute: Span , select, option, textarea, input , button.