buttonset() 不适用于动态输入

Question

我正在尝试将 jquery buttonset() 用于动态输入，但它不起作用：

$(document).ready(function () {
    var N = 30;
    for (var i = 1; i <= N; i++) {
        $('<label/>', {
            id: "label-" + i,
        }).append($('<input/>', {
            type: "checkbox",
            id: "checkbox-" + i
        })).append(i).prependTo("#showChck");
    }

    $("#showChck").buttonset('refresh');
});

只显示标签，不显示输入。

编辑：添加html代码：

<div data-role="fieldcontain" id="channels" style="display:none;">
    <fieldset id="showChck" data-role="controlgroup" data-type="horizontal">

    </fieldset>
</div>

Answer 1

标签需要for 属性才能使按钮集工作，并且标签和复选框不应嵌套。

在演示中，我更改了输入和标签的呈现方式as per the documentation here

文档说

为使关联正常工作，请为输入提供一个 id 属性，并在标签的 for 属性中引用该属性。不要将输入嵌套在标签内，因为这会导致可访问性问题。

---

$(document).ready(function() {
  var N = 30;
  for (var i = 1; i <= N; i++) {
    var $input = $('<input/>', {
      type: "checkbox",
      id: "checkbox-" + i
    });
    var $label = $('<label/>', {
      id: "label-" + i,
      for: "checkbox-" + i
    }).append(i);
    $("#showChck").append($input).append($label);
  }
  $("#showChck").buttonset();
});

$(document).ready(function() {
  var N = 30;
  for (var i = 1; i <= N; i++) {
    var $input = $('<input/>', {
      type: "checkbox",
      id: "checkbox-" + i
    });
    var $label = $('<label/>', {
      id: "label-" + i,
      for: "checkbox-" + i
    }).append(i);
    $("#showChck").append($input).append($label);
  }
  $("#showChck").buttonset();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div data-role="fieldcontain" id="channels" style="display:block;">
  <fieldset id="showChck" data-role="controlgroup" data-type="horizontal">

  </fieldset>
</div>