Loading...

Dynamically added checkbox not selectable - Material Design Lite (MDL)


Here is my simple example.

This little app creates 20 checkboxes with jQuery, using #checkbox-template as a template. The for attribute of the label and the id of each input are altered to be unique.

  • Expected behavior: Each checkbox should be selectable. Actual
  • behavior: Checkboxes are not selectable.

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

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

  <!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      for (var i = 0; i < 20; i++) {
        var newItem = $("<div>");
        newItem.html($("#checkbox-template").html());
        newItem.find("#podcast-checkbox-container").attr("for", "the-item-" + i);
        newItem.find("#podcast-checkbox").attr("id", "the-item-" + i);

        componentHandler.upgradeElement(newItem.get(0));
        newItem.appendTo("#my-list");
      }

    });
  </script>


  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>

- - Source

Answers

answered 1 week ago Priyesh Diukar #1

Every labels for attribute is mapped to nested checkboxes id. After setting up this, you can upgrade all elements using componentHandler.upgradeAllRegistered(); in one go.

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

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

<!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script>
    $(window).on('load', function() {
      for (var i = 0; i < 5; i++) {
        var newItem = $("<div>");
        newItem.html($("#checkbox-template").html());
        newItem.find("#podcast-checkbox-container").attr("for", "the-item-" + i);
        newItem.find("#podcast-checkbox").attr("id", "the-item-" + i);
        newItem.find("label").attr("for", "the-item-" + i);

        newItem.appendTo("#my-list");
      }
      componentHandler.upgradeAllRegistered();
    });
  </script>
</body>

</html>

answered 1 week ago Sean Ye #2

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

<head>
  <meta charset="UTF-8" />
  <title>My Example</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

</head>

<body>

  <!-- TEMPLATE -->
  <templates style="display: none">

    <div id="checkbox-template">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox">
          <input type="checkbox" id="podcast-checkbox" class="mdl-checkbox__input" />
        </label>
    </div>

  </templates>

  <!-- List -->
  <div id="my-list"></div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      for (var i = 0; i < 20; i++) {
        var newItem = $(`<div id="checkbox-template"><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="podcast-checkbox"><input type="checkbox" id="podcast-checkbox the-item-${i}" class="mdl-checkbox__input" /></label></div>`);

        newItem.appendTo("#my-list");
      }

    });
  </script>


  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>

comments powered by Disqus