Checkbox doesn't work in form

I have small form with checkbox. When I fill the form and save data to database and try to fill it with another data to save it to database my checkbox doesn't work. It works only when I refresh page. here is code.

<form action="javascript:saveNewBreakfast();" name="basic_validate"
            id="breakfast_validate" novalidate="novalidate">
            <div class="control-group" id="add_breakfast" style="display: none">
                <div class="control-group">
                    <label class="control-label">Select new one</label>
                    <div class="controls">
                        <select name="required" id="breakfast_select">
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="checkbox-inline"><input
                        id="is_free_breakfast" type="checkbox" checked>Is
                        free ? </label>
                </div>
                <div class="control-group" id="price_breakfast" style="display: none">
                    <label class="control-label">Price</label>
                    <div class="controls">
                        <input type="number" min="0"
                            style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"
                             id="breakfast_price"> EUR
                    </div>
                </div>
                <div class="control-group">
                    <button type="submit" class="btn btn-mini; btn-success">Save</button>
                </div>

            </div>
        </form>


$('#is_free_breakfast').change(function(){
    getIsFree = $('#is_free_breakfast').is(':checked');
    if(getIsFree){
        $('#price_breakfast').hide();
    }else{
        $('#price_breakfast').show();
    }
});