Question

这是div

    <div class="col-lg-4 pre-scrollable" id="all-menus-div">
        <h3 class="text-center">Tum menu listesi</h3>
        <div class="list-group" id="all-menus-checkboxes" th:each="menu : ${allMenusList}">
            <input th:id="${menu.id}" th:text="${menu.item}" th:value="${menu.item}" type="checkbox"/>
        </div>
        <button class="btn btn-success" disabled id="add-menus-to-role-btn" type="submit">Ekle</button>
    </div>

    <button class="btn btn-success" id="update-menus-for-role-btn" type="submit">Rolu guncelle</button>
</div>

它来自模型对象。

这是 onchange 的功能：

    $('#all-menus-checkboxes').on('change', function () { // on change of state
var addButton = document.getElementById('add-menus-to-role-btn');
        lengthOfCheckedAllMenus = $('#all-menus-div :checked').length;
        debugger;
        console.log(" lengthOfCheckedAllMenus: " + lengthOfCheckedAllMenus);

        addButton.disabled = lengthOfCheckedAllMenus <= 0;
    });

仅在单击第一个复选框时调用此函数。而且我现在只能看到日志。因此，只有当我单击第一个按钮时，禁用的按钮才会变为 false 。

当我单击其他按钮时，什么也没有发生，没有日志。

但是当我单击例如第二个，然后单击第一个时，它显示选择了 2 。

那是为什么？

简单的allMenuslist：

[MenuDTO{id=1, href='/check-deposit-money', menuName='Kontrol-Onay Ekranları', roles=[RoleDTO{id=1, name='ADMIN'}], iconName='null', item='Cüzdana Para Yükleme - Kontrol', className='null'}]

Answer 1

onchange事件必须绑定到<input>。
绑定事件必须附加到<input>之后。

但是您的<input>喜欢动态生成，建议使用“事件委托”：

将课程添加到<input>。

<input class="all-menus-checkboxes" />

使用事件委托。

<script>
  $('#all-menus-div').on('change', '.all-menus-checkboxes', function () { ... }
</script>

Answer 2

尝试

 $('#all-menus-checkboxes > input[type=checkbox]').on('change', function () { // on change of state
var addButton = document.getElementById('add-menus-to-role-btn');
        lengthOfCheckedAllMenus = $('#all-menus-div :checked').length;
        debugger;
        console.log(" lengthOfCheckedAllMenus: " + lengthOfCheckedAllMenus);

        addButton.disabled = lengthOfCheckedAllMenus <= 0;
    });

onchange仅检测div的第一个复选框

2 个答案: