jQuery .attr(“disabled”, “disabled”) not working i

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

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 2

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

Answer 3

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 4

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 5

Have you tried with prop() ??

Well prop() seems works for me.

Answer 6

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.