Управление состоянием флажка через JavaScript

Оффтоп javascript
1

Проблема с отображением состояния чекбокса

Работаю над формой редактирования данных. Нужно получать значение из базы данных и устанавливать соответствующее состояние для флажка.

Когда значение показывает, что флажок должен быть снят, система должна его отключить и деактивировать связанные элементы управления. JavaScript работает корректно: если на предыдущей странице флажок был снят, то на странице редактирования все связанные поля отключаются правильно. Однако визуально флажок все равно отображается как отмеченный, хотя логически он не активен.

Видимо, есть ошибка в HTML-разметке. Подскажите, как исправить код, чтобы правильно отображать состояние флажка?

<%flagValue=data.getFlag();
         if (flagValue == null) { flagValue = ""; }
 %>

   <input id="myFlag" type="checkbox" name="myFlag" checked="<%=flagValue%>"  
                                onchange="javascript:toggleControls();">
2

Можно еще через javascript установить состояние после загрузки. Передаешь значение в скрытое поле, потом в скрипте проверяешь и ставишь checked:

window.onload = function() {
    var hiddenValue = document.getElementById('hiddenFlag').value;
    var checkbox = document.getElementById('myFlag');
    checkbox.checked = (hiddenValue === 'true' || hiddenValue === '1');
};

Так проблем с отображением не будет - браузер сам правильно отрисует состояние

3

Да, проблема в том, что checked в HTML работает как есть/нет, а не true/false. Даже checked="false" все равно поставит галочку. Сделай условную проверку в JSP:

<input id="myFlag" type="checkbox" name="myFlag" 
<%= (flagValue != null && !flagValue.isEmpty()) ? "checked" : "" %>
onchange="toggleControls();">

Так чекбокс отметится только когда нужно.

4

Проблема в том, что атрибут checked всегда отмечает чекбокс, если он есть. Убери атрибут checked полностью, когда flagValue пустое или false. Что именно приходит из базы, когда флажок снят?