Bootstrap checkboxes in Modal work only on every 2nd page

I have a problem witj Bootstrap checkboxes ina modal. I want to give the user different download options for an image in a modal. But the checkboxes are only working on every 2nd pageclick:

Modal:

<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <form method="post">
    <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">Please choose the formats and size you want to download</h4>
      </div>
      <div class="modal-body">
       <div class="container">
          <div class="btn-group col-xs-12" data-toggle="buttons">
            <label class="btn btn-default">
              <input type="checkbox" autocomplete="off" name="jpeg" value="1">Jpeg
            </label>
            <label class="btn btn-default">
                <input type="checkbox" autocomplete="off" name="gif" value="1">Gif
            </label>    
            <label class="btn btn-default">
                <input type="checkbox" autocomplete="off" name="png" value="1">Png
            </label> 
        </div>                       
        </div>
          </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="submit" class="btn btn-default">Download</button>
         </div>
       </div>
  </form>
 </div>
</div>

and paging via ajax:

    $.ajax({
       ...
       ...
         success: function(data){
                     $('#qrouter').empty();
                     $('#qrouter').html(data);
                }
        }); 

I can't explain myself, why it is working only on every 2nd page click. Do i have to reset something?