Is there any way to toggle with attributes in jQuery?

Question

In the JQuery, we have a function called toggle which allows us to switch between the element being visible or not. And the function toggleClass, which toggles between whether or not to include a class.

$(function () {
  
  $('button').click(function () { 
    
     $('div').toggle();
    
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div style="display:none">Estou aqui</div>

<button>Click</button>

But I need to "put and take out" an attribute in the same way that this function does. I want to do this with the attribute required in a input.

You can do it in jQuery?

Answer 1

Just like toggle doesn’t, but it has the .attr() adding an attribute and the .removeAttr() that removes.

Answer 2

Can create something with jQuery.fn, thus:

jQuery.fn.extend({
  toggleAttribute: function(attr, value) {
    if (typeof value !== "string") {
        value = "true";
    }

    //Pega os elementos que tem o atributo
    var withAttr = this.filter("[" + attr + "]");

    //Pega os elementos sem o atributo
    var noAttr = this.filter(":not([" + attr + "])");

    //Se for classes então não usamos attr, porque classes funcionam diferente
    if (attr === "class") {
        noAttr.addClass(value);
        withAttr.removeClass(value);
    } else {
        noAttr.attr(attr, value);
        withAttr.removeAttr(attr);
    }

    return this;
  }
});

The use stays like this to automatically add required or remove:

$('button').click(function () { 
    $('input').toggleAttribute("required");
});

The use is thus to automatically add the attribute foo with the value baz or remove:

$('button').click(function () {
    $('div').toggleAttribute("foo", "baz");
});