Vanilla JavaScript toggleAttribute

In todays article we are going to look into the JavaScript toggleAttribute() method. This method is pretty self explaining, but it can be used to toggle a boolean attribute value.

What kind of attributes? We can think about a readonly value, required value, for instance.

In today's topic, we will look into toggling the readonly and required values of an input.

HTML Structure

<label
  >Required + ! ReadOnly
  <input id="inp-01" value="fuu" required />
</label>
<br /><br />
<label
  >! Required + ReadOnly
  <input id="inp-02" value="bar" readonly />
</label>
<br /><br />
<button onclick="toggleRequired()">Toggle Required</button>
<button onclick="toggleReadOnly()">Toggle ReadOnly</button>

So, we are having two inputs. One will be default required but not readonly and two will be the other way around. Then we'll add two buttons which will toggle Required and Readonly attributes.

JavaScript toggleAttribute Method

For the JavaScript we first get the two inputs and then define our two functions:

var input01 = document.getElementById('inp-01');
var input02 = document.getElementById('inp-02');

function toggleRequired() {
  input01.toggleAttribute('required');
  input02.toggleAttribute('required');
}

function toggleReadOnly() {
  input01.toggleAttribute('readonly');
  input02.toggleAttribute('readonly');
}

There we go, we can now toggle the attributes on these inputs!

View it in action on Codepen.

Browser Support

The method is not supported in IE (😞), but we can use a Polyfill for it!

View on CanIUse

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter