Disabling everything with CSS

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Finn
    </button>
  </div>
  <div class="mdl-card__supporting-text">Oh my glob CSS is super awesome</div>
  <div class="mdl-card__actions mdl-card--border">
    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
      <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
      <span class="mdl-switch__label"></span>
    </label>
  </div>
</div>

CSS

.disabled {
  filter: grayscale(1);
  pointer-events: none;
}

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mdl-card {
  width: 320px;
  height: 320px;
}

.mdl-card__title {
  color: #fff;
  background: url('https://media.giphy.com/media/XRnbDusSE2cBG/giphy.gif');
}

JavaScript

document.querySelector('.mdl-switch').onchange = () =>
  document.querySelector('.mdl-card__title').classList.toggle('disabled')