Question

这是我简单的例子。

这个小应用程序使用#checkbox-template作为模板，使用jQuery创建了20个复选框。标签的for属性和每个输入的id被更改为唯一。

预期的行为：每个复选框都应处于选中状态。实际
行为：无法选中复选框。

<!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>

Answer 1

用于属性的每个标签都映射到嵌套的复选框 id 。设置完之后，您可以一次使用componentHandler.upgradeAllRegistered();升级所有元素。

<!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>

Answer 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>

无法动态选择复选框-Material Design Lite（MDL）

2 个答案: