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

更新

在发表评论后，我尝试了另一种解决方案-使用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();
}

通过单击另一个复选框禁用该复选框（HTML / DJANGO）

2 个答案:

编辑以进一步解决JS部分