Ajax loaded checkbox shows undefined in jquery

I m using a checkbox to enable my select Option tag. both select option tag and checkbox are load from ajax. select option work fine but checkbox shows undefined. but work fine to enable my disabled select tag. Here is my code:

success: function (data) {
                var content = '';
                content += '<select id="package" name="package" class="form-control col-md-7 col-xs-12" required="required" disabled="disabled">';
                content += '<option value="0"></option>';
                content += '<option value="500">having 200 to 500 students</option>';
                content += '<option value="750">having 500 to 750 students</option>';
                content += '<option value="1000">having 750 to 1000 students</option>';
                content += '<option value="1500">having 1000 to 1500 students</option>';
                content += '</select>';

                $("#package_field").html(content); 
               /*for unable_package_field*/
                var content2;
                content2 += '<div class="col-md-1 col-sm-1 col-xs-1" style="margin-top: 6px;">';
                content2 += '<input type="checkbox" id="unable_package" name="unable_package" class="flat" checked="checked">';
                content2 += '</div>';
                $("div#unable_package_field").html(content2);


                $('input[type="checkbox"]').on("click", function () {
                    $("div#package_field select").prop("disabled", false);
                });
}

When it's load evrything is ok. But undefined text shows over the checkbox. what kind of change for undefined...