復選框在表單中不起作用

Question

我有帶復選框的小表格。 當我填寫表單並將數據保存到數據庫並嘗試用其他數據填充它以將其保存到數據庫時，我的復選框不起作用。 僅在刷新頁面時有效。 這是代碼。

<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();
    }
});

Answer 1

如果您使用js處理程序進行表單提交（ action="" ），則需要顯式reset表單。

就像是：

function saveNewBreakfast() {
    // submit handler code

    // reset the form to initial values
    $('#breakfast_validate')[0].reset();

    // show/hide the input based on checkbox's initial values
    $('#is_free_breakfast').change();
}

注意： reset是HTML DOM元素方法（即純js函數），而不是jQuery，因此$('selector')[0]用於將jquery對象轉換為DOM元素。 或者你可以使用普通的js

document.getElementById('breakfast_validate').reset();

---

這是一個演示：

 function saveNewBreakfast() { // submit hanlder code alert('saved with price: ' + ($('#breakfast_price').val() || 'free')); $('#breakfast_validate')[0].reset(); $('#is_free_breakfast').change(); } $('#is_free_breakfast').change(function() { getIsFree = $('#is_free_breakfast').is(':checked'); if (getIsFree) { $('#price_breakfast').hide(); } else { $('#price_breakfast').show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate"> <div class="control-group" id="add_breakfast"> <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> 

Answer 2

 $(document).ready(function () { var html_content = '<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;"' + 'name="breakfast_price" id="breakfast_price"> EUR' + '</div> '; $('#is_free_breakfast').change(function () { getIsFree = $('#is_free_breakfast').is(':checked'); if (getIsFree) { $('#price_breakfast').empty(); } else { $('#price_breakfast').html(html_content); } }); }); function form_submit(){ var queryString = $('#breakfast_validate').serialize(); console.log(queryString); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate"> <div class="control-group" id="add_breakfast"> <div class="control-group"> <label class="control-label">Select new one</label> <div class="controls"> <select name="required" id="breakfast_select"> <option>option 1</option> <option>option 2</option> <option>option 3</option> </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"> </div> <div class="control-group"> <button type="button" onclick="form_submit()" class="btn btn-mini; btn-success">Save</button> </div> </div> </form>