toggleAttr() jQuery plugin

toggleAttr() jQuery plugin

/*!
 * toggleAttr() jQuery plugin
 * @link http://github.com/mathiasbynens/toggleAttr-jQuery-Plugin
 * @description Used to toggle selected="selected", disabled="disabled", checked="checked" etc…
 * @author Mathias Bynens <http://mathiasbynens.be/>
 */
jQuery.fn.toggleAttr = function(attr) {
 return this.each(function() {
  var $this = $(this);
  $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
 });
};

thanks for this. i modified this a little for my needs

$.fn.toggleAttr = function(attr, attr1, attr2) {
  return this.each(function() {
    var self = $(this);
    if (self.attr(attr) == attr1)
      self.attr(attr, attr2);
    else
      self.attr(attr, attr1);
  });
};

Usage:

$('a#done').toggleAttr('title', 'Show done Items', 'Hide done Items');

I just wrote a similar plugin which acts more like .toggle() and .toggleClass(), which can take a boolean as a further argument. https://gist.github.com/tremby/6804168

You could also allow an option to explicitly specify if the attribute is on or off like this:

$.fn.extend({
    toggleAttr: function (attr, turnOn) {
        var justToggle = (turnOn === undefined);
        return this.each(function () {
            if ((justToggle && !$(this).is("[" + attr + "]")) ||
                (!justToggle && turnOn)) {
                $(this).attr(attr, attr);
            } else {
                $(this).removeAttr(attr);
            }
        });
    }
});

Then use like this:

$(selector).toggleAttr("required");
$(selector).toggleAttr("required", true);
$(selector).toggleAttr("required", false);

That way the API is similar to the way .toggleClass() is implemented.

$(selector).attr('disabled', function (_, attr) { return !attr });

This works (at least to enable or disable fields) as well!

@viicviicviic

jQuery(selector).attr('required', function (_, attr) { return !attr });

This working for required too