buttonset() not working with dynamic inputs

Question

I'm trying to use jquery buttonset() for dymanic inputs but it's not working:

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

Only the label is shown, not the input.

Edit: Add html code:

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

    </fieldset>
</div>

it helps when you're doing DOM manipulation so the structure can be quickly seen instead of inferred. just in case there's something else that might be messing up the code is all. :D — Daemedeor
– Daemedeor, Commented May 29, 2015 at 23:50

Dhiraj · Accepted Answer · 2015-05-29 23:33:13Z

2

Label needs for attribute for buttonset to work and also labels and checkboxes should not be nested.

In the demo, I changed the way inputs and labels are rendered as per the documentation here

Documentation says

For the association to work properly, give the input an id attribute, and refer to that in the label's for attribute. Don't nest the input inside the label, as that causes accessibility problems.

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

answered May 29, 2015 at 23:33

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

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

11 Comments

Chazy Chaz Over a year ago

Thanks! Would it be a problem if I put the label + input into a div? So I don't have to hide/show() both, that's why I nested.

Chazy Chaz Over a year ago

Hmm now that I realize the order of the checkboxes... in my page i see from 30 to 1 instead of the code snippet order, you know why???

Daemedeor Over a year ago

because if you use append, it adds to the end, you might want to use $.prepend

Dhiraj Over a year ago

@ChazyChaz: In your code, you are using prepend which is causing the problem. Are you sure you are still using append ?

Daemedeor Over a year ago

@DhirajBodicherla Jquery includes a prepend method that's not the issue, i believe it was the for attributes that was causing the probelm (see api.jquery.com/prepend)

|

Collectives™ on Stack Overflow

buttonset() not working with dynamic inputs

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related