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

问题

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!

回答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

回答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>

回答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.

回答4:

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.

回答5:

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

回答6:

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

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

You should use "readonly" instead like:

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

回答7:

Have you tried with prop() ??

Well prop() seems works for me.

回答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.

回答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.

来源：https://stackoverflow.com/questions/6048022/jquery-attrdisabled-disabled-not-working-in-chrome

标签

jquery

google-chrome

cross-browser

attr

jquery-attributes