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属性，并在标签的“属性”中引用该属性。不要将输入嵌套在标签内，因为这会导致可访问性问题。

$(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();
});

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

buttonset（）不使用动态输入

1 个答案: