toggle disabled attribute in jquery

Question

I've a checkbox that enable or disable a select element

Actually I use this simple piece of code that works fine.

$("#filtri").change(function(){
    if ($("#menuContinenti").attr("disabled")) {
        $("#menuContinenti").removeAttr("disabled");
    } else {
        $("#menuContinenti").attr("disabled", "disabled");
    }
});

Is this the best way or is there something like a .toggle() function to switch between disabled/enabled?

@FrançoisWahl yes it does work (as i wrote), but is this the best way to attemp this task? I hope jquery offers something like a .toggle() function to switch between boolean attributes like disabled — Naigel, Aug 10 '12 at 14:05
jQuery has a toggle but only to toggle visibility: http://api.jquery.com/toggle/ I don't know of a jQuery build-in toggle for disable/enable but you can have a look at all of the effects in their docs: http://api.jquery.com/category/effects/ — Nope, Aug 10 '12 at 14:07
possible duplicate of [Jquery toggle input disabled attribute](http://stackoverflow.com/questions/4702000/jquery-toggle-input-disabled-attribute) — Ram, Aug 10 '12 at 14:10
Possible duplicate of [Toggle input disabled attribute using jQuery](http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery) — Jannie Theunissen, Jan 18 '17 at 17:31

Explosion Pills · Accepted Answer · 2015-12-16T15:00:04.617

47

You should use .prop for disabled:

$("#menuContinenti").prop('disabled', function () {
   return ! $(this).prop('disabled');
});

UPDATE: didn't realize the current property value is an argument to the function; this version is even cleaner:

$("#menuContinenti").prop('disabled', function (_, val) { return ! val; });

UPDATE: ES2015

$("#menuContinenti").prop("disabled", (_, val) => !val);

edited Dec 16 '15 at 15:00

answered Aug 10 '12 at 14:04

Explosion Pills

188,624
52
326
405

It is nice and short. What is the benefit of using `.prop` though? I don't know myself but I like the shortness of your code. – Nope Aug 10 '12 at 14:05
Nice. I never thought to do it that way. – wirey00 Aug 10 '12 at 14:05
2

@FrançoisWahl `prop` is the property of the DOM object vs. `attr`, which is the serialized HTML. I'm afraid I don't know too many specifics, just that using `.attr` for disabled/checked may not work like you expect. jQuery's API recomments using `.prop` specifically. To quote: "The .prop() method should be used to set disabled and checked instead of the .attr() method." – Explosion Pills Aug 10 '12 at 14:09
@ExplosionPills: +1 Nice one, thanks for getting back on that. – Nope Aug 10 '12 at 14:11
@LorenzoC your test applies the selector every time, which is wrong. You also did not bind `.change` in the second test. This is a better test: http://jsperf.com/11903335-11903390/2 – Explosion Pills Aug 10 '12 at 14:26
It's very simple to write a [`toggleProp` plugin](http://jsfiddle.net/zzzzBov/pZ54Y/) – zzzzBov Aug 10 '12 at 14:29
1

@LorenzoC, premature optimization is the root of all evil. Given that JS is an asynchronous language, most of the time is spent idling, and very little time is needed for computation. If you find that a particular bit of code is causing issues by being too slow, then you should benchmark and fix it. Otherwise, focus on writing readable code. – zzzzBov Aug 10 '12 at 14:43
1+ The update ES2015 doesn't work in (actual) Safari, that's why I like the previous one. Thanks for the idea. – ddlab Apr 02 '16 at 12:09

score 8 · Answer 2 · edited May 23 '17 at 11:46

You can write your own plugin that does something like this.

Add this after jQuery, in a script file preferably.

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

Then use it like this:

$('#my-select').toggleDisabled();

Courtesy: Toggle input disabled attribute using jQuery

score 2 · Answer 3 · answered Aug 10 '12 at 14:15

2

you can check using $.is function like below

$("#filtri").change(function(){
    $("#menuContinenti").attr("disabled", ! $(this).is(':checked'));    
});

answered Aug 10 '12 at 14:15

Loken Makwana

3,788
2
21
14

toggle disabled attribute in jquery

3 Answers3

Linked