Toggle input disabled attribute using jQuery

Question

Here is my code:

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

How do I toggle .attr('disabled',false);?

I can't seem to find it on Google.

Any reason why you can't use the disabled property of the field? $("input").get(0).disabled = isFalse; // jsfiddle.net/uAfhj — Shanimal
– Shanimal, Commented May 2, 2013 at 15:50

Arne · Accepted Answer · 2023-06-26 19:26:51Z

523

$('#el').prop('disabled', (i, v) => !v);

The .prop() method gets the value of a property for the first element in the set of matched elements.

Arguments

Property name (e.g. disabled, checked, selected) anything that can either be true or false
Property value, can be:
- (empty) returns the current value.
- boolean sets the property value.
function Is called for each matched element, the returned value is used to set the property. There are two arguments passed; the first argument is the index (number, starting with 0, increases for each found element). The second argument is the current value of the element (true/false).

So in this case, I used a function that supplied me the index (i) and the current value (v), then I returned the opposite of the current value, so the property state is reversed.

Additional information

The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

edited Jun 26, 2023 at 19:26

answered Feb 28, 2012 at 20:43

Arne

6,2602 gold badges24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

igneosaur Over a year ago

As an update, this looks very neat using arrow functions: $('#el').prop('disabled', (i, v) => !v);

ifaour · Accepted Answer · 2011-01-15 22:31:39Z

104

I guess to get full browser comparability disabled should set by the value disabled or get removed!
Here is a small plugin that I've just made:

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

Example link.

EDIT: updated the example link/code to maintaining chainability!
EDIT 2:
Based on @lonesomeday comment, here's an enhanced version:

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

edited Jan 15, 2011 at 22:31

answered Jan 15, 2011 at 20:55

ifaour

38.1k12 gold badges74 silver badges79 bronze badges

5 Comments

lonesomeday Over a year ago

This may work, but it's going to be slow, because you're constantly creating new jQuery objects. $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; });} is all you need.

ifaour Over a year ago

@lonesomeday: I was going to post this but I tend to think that this is not the correct way to set/unset disabled attribute. Anyway, if you can confirm that this is a cross-browser solution..I will update my answer.

skybondsor Over a year ago

For any future googlers, this solution works equally well for the attribute 'required'.

Ciro Santilli OurBigBook.com Over a year ago

prop is the better method since 1.6 as said by Arne.

Orman Faghihi Mohaddes Over a year ago

No, I don't suggest to do like this, prop is better

Присяжный Дмитрий · Accepted Answer · 2012-07-24 08:53:51Z

22

    $('#checkbox').click(function(){
        $('#submit').attr('disabled', !$(this).attr('checked'));
    });

answered Jul 24, 2012 at 8:53

Присяжный Дмитрий

2762 silver badges4 bronze badges

2 Comments

Manuel Arwed Schmidt Over a year ago

Note: only works below jQuery 1.6. Use .prop() instead of attr() on both occurences to get boolean values back. See api.jquery.com/prop

Neeraj Over a year ago

@ManuelArwedSchmidt Not right. Think you don't understand the difference between attr and prop yet.

unequalsine · Accepted Answer · 2017-11-25 15:42:34Z

11

Another simple option that updates on a click of the checkbox.

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery:

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

In action: link

answered Nov 25, 2017 at 15:42

unequalsine

1842 silver badges10 bronze badges

1 Comment

Naeem Sarfraz Over a year ago

Get rid of the if block with $('#item').prop('disabled', this.checked);

eon · Accepted Answer · 2017-08-08 21:44:49Z

3

Quite a while later, and thanks to @arne, I created this similar small function to handle where the input should be disabled AND hidden, or enabled AND shown:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

Then a jQuery object (such as $('input[name="something"]') ) is simply switched using:

toggleInputState(myElement, myBoolean)

answered Aug 8, 2017 at 21:44

eon

1,9381 gold badge23 silver badges24 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-01-15 20:43:18Z

This is fairly simple with the callback syntax of attr:

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});

Collectives™ on Stack Overflow

Toggle input disabled attribute using jQuery

6 Answers 6

Arguments

Additional information

Attributes vs. Properties

1 Comment

5 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Arguments

Additional information

Attributes vs. Properties

1 Comment

5 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related