Отключите флажок, установив другой флажок (HTML / DJANGO)

Question

У меня 2 флажка на моем сайте. Один из них дает мне возможность (или нет) щелкнуть (изменить состояние) второго. Поэтому, если первый флажок установлен, я могу изменить состояние второго, но если первый флажок не установлен, то я просто не могу (флажок отключен).

Итак, я написал простое выражение if / else в html (с django python), и оно выглядит так:

{% if first.value %}
    {% if second.value %}
        <input id="myCheck" type="checkbox" checked="checked">
    {% else %}
        <input id="myCheck" type="checkbox">
    {% endif %}
{% else %}
    {% if second.turnOnOff %}
        <input id="myCheck" type="checkbox" disabled="disabled"  checked="checked">
    {% else %}
        <input id="myCheck" type="checkbox" disabled="disabled">
    {% endif %}
{% endif %}

Может быть, некоторые из вас смущены, почему у меня есть оператор if для второго флажка, я просто проверяю его последнее значение из базы данных, чтобы узнать, было ли оно True или False. Я проверил этот код, и он не работает хорошо. Я имею в виду, если я обновляю страницу после каждого изменения первого флажка, он работает, но должен работать все время, не обновляя страницу все время. Что я делаю не так?

UPDATE

После некоторых комментариев я попробовал другое решение - используя javascript. Поэтому я создаю простую функцию JS

function change() 
{
        if (document.getElementById("myCheck").isDisabled) {
            document.getElementById("myCheck").disabled = false;
        }
        else {
            document.getElementById("myCheck").disabled = true;
        }
}

и поменяйте деталь первым флажком, чтобы вызвать его. Теперь это работает, но только для первого звонка. Я имею в виду, когда я отключаю флажок, я не могу включить его

Answer 1

О вашем JavaScript: isDisabled - это функция, поэтому она всегда будет возвращать true так, как вы его используете (то есть это не null, 0 или false). Просто добавьте ():

function change() {
    if (document.getElementById("myCheck").isDisabled()) {
        document.getElementById("myCheck").disabled = false;
    }
    else {
        document.getElementById("myCheck").disabled = true;
    }
}

Или еще лучше:

function change() {
    var el = document.getElementById("myCheck");
    el.disabled = !el.isDisabled();
}

Answer 2

Ваш код Python выполняется на сервере (который включает в себя шаблонизатор). Таким образом, он будет отвечать только на запросы. Проще говоря, ваш браузер отправляет запрос на сервер, он выполняет ваш код Python и отвечает обработанным шаблоном, который отобразит ваш браузер. Нажатие на эту кнопку только изменяет DOM в вашем браузере, на сервер не будет отправляться запрос, и ваш код Python (включая шаблонизатор), таким образом, никогда не будет выполнен.

Теперь, если вы не хотите перезагружать всю страницу, вам придется прибегнуть к Javascript. Присоедините обработчик событий к первому флажку и измените DOM соответственно, чтобы отобразить или скрыть второй флажок.

Обратите внимание, что вы все равно должны проверять данные, которые вы получаете из своей формы, поскольку Javascript выполняется на стороне клиента и поэтому никогда не должен быть доверенным.

Изменить, чтобы немного подробнее рассмотреть JS-часть

Прежде всего, обратите внимание, что это другая проблема, и если вы застряли при написании своей части JS, вам просто нужно задать новый вопрос.

Однако, поскольку это в некоторой степени связано с вопросом, приведу пример кода JS, иллюстрирующий то, о чем я думал.

var first = document.getElementById('first');

first.addEventListener('click', function() {
  var divElem = document.getElementById('toggle'); 
  if (this.checked){
    divElem.style.display = 'block'; 
  }
  else {
    divElem.style.display = 'none';
  }
});

.hidden {
  display: none;
}

<input type="checkbox" id="first"><span>First</span><br>
<div id="toggle" class="hidden">
  <input type="checkbox" id="second"><span>Second</span>
</div>

JSFiddle: http://jsfiddle.net/36as9Lh1/

Обратите внимание, что это очень простой пример, и его, скорее всего, следует расширить для вашего конкретного случая использования. Например, в настоящее время давайте установим первый флажок, установите второй флажок, а затем снова снимем первый флажок, в результате чего второй флажок будет проверен, когда ему не разрешено.