jQuery Mobile - adding list of checkbox dynamically

Question

i'm trying to add a list of checkbox dynamically but it does not show properly with mobile style.

here the js code:

var name = "option";
var id = "id";

$("#frame").html('<fieldset data-role="controlgroup"><legend>Seleziona le categorie da eliminare:</legend></fieldset>');

for (var i = 0; i < 4; i++) {
  $("fieldset").append('<input type="checkbox" name="' + name + '" id="' + id + '"><label for="' + name + '">' + name + '</label>');
}

$("#frame").append('<a href="#" data-role="button" data-inline="true" id="btndelcat">Elimina</a>');

$("#frame").trigger('create');

Code on editor JSFiddle.

Omar · Accepted Answer · 2013-10-18 09:14:59Z

3

You have a mistake in creating checkboxes. Label's for attribute should match checkbox's id.

From this:

$("fieldset").append('<input type="checkbox" name="' + name + '" id="' + id + '"><label for="' + name + '">' + name + '</label>');

To this:

$("fieldset").append('<input type="checkbox" name="' + name + '" id="id' + i + '"><label for="id' + i + '">' + name + '</label>');

Demo

answered Oct 18, 2013 at 9:14

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Mobile - adding list of checkbox dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related