jquery - jQuery:チェックボックスが半分動作しているときに追加するスクリプト - チェックボックスが実際にチェックされないのはなぜですか?

Question

目標: (jQuery Mobile) ポップアップで、チェックできる人の検索可能なリスト。チェックするとテーブルリストに表示されます（チェックを外すと削除されますが、その部分はまだわかりません）。

チェックボックスをクリックするとリストに表示されるようになりましたが、実際のチェックボックスが壊れているようで、チェックが表示されません。なぜ、どのように修正すればよいですか? このすべてを行うためのより良い方法を自由に提案してください。

フィドル: http://jsfiddle.net/2sRAc/

HTML:

<a href="#roundAddVol_Pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Assign Volunteer(s)</a>

<table data-role="table" data-mode="">
    <thead>
        <tr>
            <th>Volunteer(s)</th>
        </tr>
    </thead>
    <tbody id="volunteersList">
        <tr>
            <td>Sample</td>
        </tr>
    </tbody>
</table>
<div data-role="popup" id="roundAddVol_Pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">
    <div data-role="header">
         <h1>Assign Volunteer(s)</h1>

    </div>
    <div data-role="content" data-theme="a">
        <p>Search for names and add a checkmark to each you'd like to assign.</p>
        <br>
        <fieldset>
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search volunteers..." data-inset="true" data-theme="a">
            <li style="padding:0px;">
                <label for="vol1">Joe</label>
                <input name="vol1" id="vol1" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol2">Betty</label>
                <input name="vol2" id="vol2" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol3">Tom</label>
                <input name="vol3" id="vol3" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol4">Susie</label>
                <input name="vol4" id="vol4" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol5">Frank</label>
                <input name="vol5" id="vol5" type="checkbox">
            </li>
            </ul>
        </fieldset> <a href="#" data-role="button" data-inline="true">Save</a>
 <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow">Cancel</a>

    </div>
</div>

JS:

$(document).ready(function () {
    $('#roundAddVol_Pop input:checkbox').change(

    function () {
        var label = $('label[for="' + this.id + '"]')
        if ($(this).is(':checked')) {
            $('#volunteersList').append('<tr><td>' + label.text() + '</td></tr>').listview('refresh');
        } else {

        }
    });
});

また、コードのチェック解除/削除を理解し、チェックボックスを含むリストの見栄えを良くするのに役立ちたいと思いますが、それらは別の質問だと思います...