Checkbox Javascript函数在Bootstrap Modal中不起作用

Question

我正在使用Bootstrap，并且在模态中有一个文本字段和一个复选框。当复选框被选中时，我正在使用javascript启用文本字段，但是当在模态内部时，它似乎不起作用。

模态：

<div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <form action="php_add/event.php" method="post">
        <div class="modal-body">
            <input type="checkbox" id="foodBox" class="flat-red foodBox" />
            <input name="food" id="food" disabled>
        </div>
    </form>
</div>

JS：

$(document).getElementById('foodBox').onchange = function() {
    document.getElementById('food').disabled = !this.checked;
    document.getElementById('food').value = "";
};

当复选框位于模态内时，为什么函数不起作用？

Answer 1

你正在混合使用jQuery和本机JS语法..对于本机JS：

document.getElementById("foodBox").onchange = function() {
    var food = document.getElementById('food');
    food.disabled = !this.checked;
    food.value = "";
}

jQuery的：

$("#foodBox").change(function() {
    $("#food").prop("disabled", !this.checked);
    $("#food").val("");
});