python - 通过单击另一个复选框禁用复选框 (HTML/DJANGO)

Question

我的网站上有 2 个复选框。其中之一让我有机会(或没有)点击(更改状态)第二个。因此，如果选中第一个复选框，我可以更改第二个复选框的状态，但如果未选中第一个复选框，那么我就不能(复选框被禁用)。

所以我在 html 中编写了简单的 if/else 语句(使用 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。我检查了该代码，效果不好。我的意思是，如果我在第一个复选框的每次更改状态后刷新页面，它就可以工作，但应该一直工作，而不需要一直刷新页面。我做错了什么？

更新

经过一些评论后，我尝试了另一种解决方案 - 使用 javascript。所以我创建了简单的 JS 函数

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

并更改第一个复选框的部分以调用它。现在它可以工作，但仅适用于第一次调用。我的意思是当我禁用复选框时我无法启用它

Answer 1

您的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/

请注意，这只是一个非常简单的示例，很可能应该针对您的具体用例进行扩展。例如，当前允许您选中第一个复选框，选中第二个复选框，然后再次取消选中第一个复选框，从而导致在不允许时选中第二个复选框。