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!

Side note: you can use the [`:disabled`](http://api.jquery.com/disabled-selector/) selector instead of `input[disabled='disabled']`. — namuol, May 18 '11 at 16:38

score 88 · Accepted Answer · edited May 23 '17 at 12:10

88

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

edited May 23 '17 at 12:10

Community

1
1

answered May 18 '11 at 16:41

Naftali aka Neal

138,754
36
231
295

2

Using 1.5.2; sadly I still can't get it to work with the code you provided. Thank you for your time. – Joris Ooms May 18 '11 at 16:44
`$("input:text").attr("disabled", "disabled");`. Just pasting that in to check if I have the same code, heh. Can't get it to work. Jeez, stupid Chrome. :( – Joris Ooms May 18 '11 at 16:49
@Cabaret, can you post an example (working) code on jsfiddle.net and see if you get the same results? – Naftali aka Neal May 18 '11 at 16:50
Yeah so.. I don't get it. It works fine in JSfiddle and it doesn't work in my application. http://jsfiddle.net/b6L6g/1/ – Joris Ooms May 18 '11 at 16:58
@cabaret, there must be a bug somehwere else – Naftali aka Neal May 18 '11 at 17:02
I switched some code around, not sure what it was that I did exactly but it works now. I'm using the last code example you provided. Thanks a lot. – Joris Ooms May 18 '11 at 17:29
I figured out what went wrong. When I set the attributes back to disabled, my browser doesn't automatically seem to update it. The fields only change to 'disabled' when I click on the page. This seems to be only in Chrome though. My code was right all the time, just a weird quirk in Chrome. Still going to use yours, it's far easier to read ;) Thought I'd let you know. – Joris Ooms May 18 '11 at 18:23
@neal I am having problem with this $(this).attr('disabled', 'disabled')... the button is got disabled but the form is not submitting...its working in firefox but not working in chrome...I have tried all the ways you provided...Plz tell me is there any other way to solve this – Dragon Oct 19 '15 at 13:05
@Sadaquat do you have a fiddle I can look at? – Naftali aka Neal Oct 19 '15 at 14:49

score 5 · Answer 2 · edited May 24 '17 at 15:16

5

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>

edited May 24 '17 at 15:16

Aurasphere

3,490
12
37
63

answered Mar 20 '14 at 16:33

IQtheMC

181
1
11

fanfavorite · Answer 3 · 2011-05-18T16:59:25.290

3

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.

edited May 18 '11 at 16:59

answered May 18 '11 at 16:41

fanfavorite

4,916
1
28
56

One thing to note is to use readonly if you are looking to submit the data via get or post. – fanfavorite May 18 '11 at 16:54

score 2 · Answer 4 · answered Jun 02 '13 at 14:29

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.

score 0 · Answer 5 · answered Nov 18 '13 at 13:56

0

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.

answered Nov 18 '13 at 13:56

sledgeweight

5,645
5
25
42

score 0 · Answer 6 · answered Jul 01 '19 at 16:03

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.

score 0 · Answer 7 · answered May 18 '11 at 16:37

0

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

answered May 18 '11 at 16:37

RussellUresti

6,183
3
26
26

This is an example of the technique: http://jsbin.com/ofuca3/edit -- Is the input you're trying to disable being written in via ajax? Or does it already exist in the DOM? – RussellUresti May 18 '11 at 16:45
It already exists in the DOM. I'll check out your link! Thank you – Joris Ooms May 18 '11 at 16:47

Galled · Answer 8 · 2011-05-18T16:50:34.653

0

Have you tried with prop() ??

Well prop() seems works for me.

edited May 18 '11 at 16:50

answered May 18 '11 at 16:43

Galled

3,958
2
25
41

Note to @cabaret tho, this is exclusive to jQuery 1.6, so if you arent on that version this wont work – Oscar Godson May 18 '11 at 16:51
see my answer and the OP's response – Naftali aka Neal May 18 '11 at 16:53

score 0 · Answer 9 · answered May 18 '11 at 16:45

0

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

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

You should use "readonly" instead like:

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

answered May 18 '11 at 16:45

Oscar Godson

28,084
40
103
191

1

Thanks. i'll check it out. Is there a crucial difference between readonly and disabled or is it basically the same? – Joris Ooms May 18 '11 at 16:47
Its the same except for one minor thing... readonly doesnt have any default browser CSS whereas disabled does. In this example I just did `[readonly] { filter: alpha(opacity = 50); opacity:0.5; }` and achieved the same affect. – Oscar Godson May 18 '11 at 16:49
3

One big difference: fields with `readonly` set are sent to the server when the form is submitted, `disabled` elements are not. – mu is too short May 18 '11 at 16:55
Ah, i didnt know that. Thanks. – Oscar Godson May 18 '11 at 18:34

jQuery .attr("disabled", "disabled") not working in Chrome

9 Answers9

Linked

Related