如果复选框/禁用元素无法正常工作

Question

我正在尝试制作一个脚本，以便如果您选中/取消选中复选框输入，它将启用/禁用目标输入文本框。我的代码 if 语句似乎无法正常运行，有时会同时触发两个 if，有时根本不会触发。我已经完成调试并尝试了许多变体，但它仍然无法正常工作。这是我所拥有的，非常感谢任何帮助！

function disable(elem) {
    var obj = document.getElementById(elem);
    status = obj.disabled;
    console.log(status);
    if (status = true) {
        console.log("test");
        obj.disabled = false;
        obj.style.backgroundColor = "white";
    }
    if (status = false) {
        console.log("test2");
        obj.disabled = true;
        obj.style.backgroundColor = "bfbfbf";
    }
}

Answer 1

由于多种原因，此代码没有表现出正确的行为。

第一个原因是您的 if 语句是内联的，而不是 if-else 形式。更好的组织如下：

function disable(elem) {
    var obj = document.getElementById(elem);
    status = obj.disabled;
    console.log(status);
    if (status == true) {
        console.log("test");
        obj.disabled = false;
        obj.style.backgroundColor = "white";
    } else {
        console.log("test2");
        obj.disabled = true;
        obj.style.backgroundColor = "#bfbfbf";
    }
}

这意味着即使您正在检查的变量在块中的代码执行时发生更改，它也不会执行相对块中的代码，无论其新值如何。如您所见，如果在第一个 if 语句中的代码运行时值发生变化，那么两个控制块都可以运行。

它行为不正确的第二个原因是您的 if 语句中的语法不正确。您当前正在使用 = 运算符，这意味着将变量设置为您要检查的内容。如果您想以这种方式编写它们，则必须使用 == 或 === 相等检查（后者是严格类型）。更好的方法是通过检查值是否为真来完全省略该运算符，如下所示：

function disable(elem) {
    var obj = document.getElementById(elem);
    status = obj.disabled;
    console.log(status);
    if (status) {
        console.log("test");
        obj.disabled = false;
        obj.style.backgroundColor = "white";
    } else {
        console.log("test2");
        obj.disabled = true;
        obj.style.backgroundColor = "#bfbfbf";
    }
}

这应该会为您提供预期的控制行为 :) 如前所述，请确保正确格式化您的值（例如“#bfbfbf”而不是“bfbfbf”）