复选框 Javascript 函数在 Bootstrap modal 中不起作用

Checkbox Javascript function not working in Bootstrap Modal

本文关键字：modal 不起作用 Bootstrap Javascript 函数 复选框      更新时间：2023-09-26

我正在使用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 = "";
};

为什么当复选框位于模态内部时该功能不起作用？

你混合了jQuery和原生JS语法.. 对于原生JS：

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

j查询：

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