如何保存动态创建复选框的更改状态

Question

I have a problem with saving state of checkbox which is created in modal dialog via jquery function append() . The problem is when you close modal and open it again that state it's rewrite with append() function.

There is live demo of it.

Answer 1

The problem is that on every modal call you're rebuilding it's .html() with a brand new HTML string.
Instead create an in-memory checkbox element and append that one.

jsFiddle demo

var $cbx = $("<input>", {
  type: "checkbox",
  value: "",
  class: "form-control checkboxpicker",
  checked: true,
  name: ""
});

$('button[data-target="#myModal"]').on('click', function(){
  $('#app').html('<div class="checkboxContainer">Checkbox: </div>');
  $('.checkboxContainer').append($cbx); // Append our in-memory checkbox!
  $cbx.checkboxpicker();
});

To recap, whatever happens to the $cbx checked state, will always be remembered internally inside the $cbx . Re-appending that item - you'll always get it's last ( current ) state.

Answer 2

Use $('.checkboxpicker').prop('checked',active); and initialize active as false/true initially.

 var active = false; $('button[data-target="#myModal"]').on('click', function() { $('#app').html('<div class="checkboxContainer">Checkbox: </div>'); $('.checkboxContainer').append( '<input class="checkboxpicker" name="" value="" type="checkbox" class="form-control">' ); $('.checkboxpicker').prop('checked', active); $('.checkboxpicker').checkboxpicker(false); }); $(document).on('change', '.checkboxpicker', function() { active = this.checked; console.log(active); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-checkbox/1.4.0/bootstrap-checkbox.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div id="app"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Fiddle Demo