Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 770
Joris Ooms Avatar asked May 18 '11 16:05

Joris Ooms


People also ask

How to remove disabled jQuery?

To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.

How can use disabled property in jQuery?

The disable/enable an input element in jQuery can be done by using prop() method. The prop() method is used to set or return properties and values for the selected elements. Example 1: This example uses prop() method to disable the input text field.

How check button is disabled or not in jQuery?

Checking if the button is disabled or enabled with jQuery removeAttr('disabled'); }; const checkButton = (e) => { const isDisabled = $('#my-button'). prop('disabled'); if( isDisabled ){ alert("Is disabled!"); } else{ alert("Is enabled"); } }; $(document).

What is ATTR jQuery?

jQuery attr() Method The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the FIRST matched element.


3 Answers

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

like image 200
Naftali Avatar answered Oct 14 '22 00:10

Naftali


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>
like image 29
IQtheMC Avatar answered Oct 14 '22 01:10

IQtheMC


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.

like image 24
fanfavorite Avatar answered Oct 14 '22 01:10

fanfavorite