index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
  <title>Scss environment playground</title>
</head>

<body>
  <main>
    <div>
      <input type="checkbox" id="original">
      <label for="original">Some checkbox</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox">
      <label for="my-checkbox">Some checkbox</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox-2" checked>
      <label for="my-checkbox-2">Checked</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox-3" disabled>
      <label for="my-checkbox-3">Disabled, unchecked</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox-4" checked disabled>
      <label for="my-checkbox-4">Disabled, checked</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox-5">
      <label for="my-checkbox-5">Indeterminate set in JS</label>
    </div>

    <div>
      <input type="checkbox" id="my-checkbox-6" disabled>
      <label for="my-checkbox-6">Disabled, indeterminate set in JS</label>
    </div>
  </main>

  <script>
    var indeterminateInput1 = document.getElementById('my-checkbox-5');
    var indeterminateInput2 = document.getElementById('my-checkbox-6');

    indeterminateInput1.indeterminate = true;
    indeterminateInput2.indeterminate = true;
  </script>

</body>

</html>