0

我正在尝试将 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>
4

1 回答 1

2

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

在演示中，我根据此处的文档更改了输入和标签的呈现方式

文档说

要使关联正常工作，请为输入提供一个 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>

于 2015-05-29T23:33:13.193 回答