Dynamically creating productlists with checkboxes in jQuery Mobile proves difficult

后端未结

关注

 1  1901

爱一瞬间的悲伤

I\'m working on a mobile shopping list app that is supposed to support the user when creating shopping lists.

I use the Jquery Mobile framework to achieve mobile functio

相关标签:

1条回答

耶瑟儿～

2021-01-26 10:52

jQuery Mobile is calling controlgroup an enhanced list of checkbox inputs.

So you need to empty the container of your set of checkbox inputs, add the desired items and then refresh the whole controlgroup:

function makeUL(choice) {
  var cases = {
    "fruits": ['Banane', 'Gurke', 'Brokkoli', 'Chinakohl', 'Grünkohl', 'Eisbergsalat'],
    "drinks": ['Wasser', 'Cola', 'Fanta', 'Sprite', 'Pils', 'Radler']
  };
  var array = cases[choice],
    list = $("#list");
  list.controlgroup("container").empty();
  for (var i = 0; i < array.length; i++) {
    var item = $("<label for='checkbox-" + i + "'>" + array[i] + "</label><input type='checkbox' id='checkbox-" + i + "'></input>");
    list.controlgroup("container").append(item);
    $(item[1]).checkboxradio();
  }
  list.controlgroup("refresh");
}


$(document).on("pagecreate", "#page-1", function() {
  $("input[name*=radio-choice-wish]").click(function() {
    var wish = $("input[name*=radio-choice-wish]:checked").val();
    makeUL(wish);
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-1">
    <div data-role="header" data-position="fixed">
      <h1>Shopping List</h1>
    </div>
    <div role="main" class="ui-content">
      <div class="ui-field-contain">
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>I wish...</legend>
        <input name="radio-choice-wish" id="radio-choice-wish-fruits" value="fruits" checked="checked" type="radio">
        <label for="radio-choice-wish-fruits">Fruits</label>
        <input name="radio-choice-wish" id="radio-choice-wish-drinks" value="drinks" type="radio">
        <label for="radio-choice-wish-drinks">Drinks</label>
      </fieldset>
      </div>
      <form action="demoform.asp" id="list-form" method="post" name="list-form">
        <fieldset data-filter="true" data-input="#myFilter" id="list" data-role="controlgroup">
        </fieldset>
      </form>
    </div>
  </div>
</body>
</html>

Please, take a look also here: Dynamic controlgroup

0 讨论(0)