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

Question

我的网站上有 2 个复选框。其中之一让我有机会（或不）点击（更改状态）第二个。因此，如果选中第一个复选框，我可以更改第二个复选框的状态，但如果未选中第一个复选框，则我不能（复选框已禁用）。

所以我在 html 中（使用 django python）编写了简单的 if/else 语句，它看起来像：

{% 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。我检查了该代码，但效果不佳。我的意思是，如果我在第一个复选框的每次更改状态后刷新页面，它可以工作，但应该一直工作，而不是一直刷新页面。我做错了什么？

更新

在一些 cmets 之后，我尝试了另一种解决方案 - 使用 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/

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

Answer 2

关于你的 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();
}