无法根据下拉列表选择禁用文本输入答案

【问题标题】：Cannot disable text input based on dropdown list selection无法根据下拉列表选择禁用文本输入
【发布时间】：2019-06-15 20:39:55
【问题描述】：

我有一个带有下拉列表的 html 表单：

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
        <option value="nu">Nu se aplica</option>
        <option value="pfa">Persoana Fizica Autorizata PFA</option>
        <option value="pja">Persoana Juridica Autorizata PJA</option>   
</select>

-- 也尝试使用 onchange 而不是 onChange。没有任何改变。

我希望当我选择值为“nu”的选项时禁用以下文本表单，并在选择“pfa”或“pja”时启用：

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

我尝试了许多 javascript 代码，我将发布最相关的代码。问题是，当我选择“nu”时，“company”被禁用，没关系，当我选择“pja”时，它被启用，没关系，但是当我选择“pfa”时，它被禁用但是应该在这里启用..不要弄清楚是什么问题..

javascript代码：

<script>
function changeState() {
    if(document.getElementById("pjsaupf").value == "nu") {
        document.getElementById("company").disabled=true;
    }else

    if(document.getElementById("pjsaupf").value == "pfa") {
        document.getElementById("company").disabled=false;
    }
    else
    if(document.getElementById("pjsaupf").value == "pja") {
    document.getElementById("company").disabled=false;
    } 
}
</script>

和替代代码：

<script>
var select = document.getElementById('pjsaupf');

function changeState() {
    switch (this.value) {
        case '1':
            document.getElementById("company").disabled=true;
            break;
        case '2':
            document.getElementById("company").disabled=false;
            break;
        case '3':
            document.getElementById("company").disabled=false;
            break;
    }
}

select.addEventListener('change', changeState);

</script>

编辑：我在本地主机上运行

【问题讨论】：

标签： javascript html forms

【解决方案1】：

我尝试了您的代码，似乎一切正常。当您选择 nu 时，company 将被禁用。当您选择pfa 或pja 时，company 被启用。

尝试在隐身模式下运行相同的代码。我认为您的 javascript 已被浏览器缓存，并且没有使用最新代码进行更新。

以下是一个演示：

function changeState() {
    if(document.getElementById("pjsaupf").value == "nu") {
        document.getElementById("company").disabled=true;
    }else

    if(document.getElementById("pjsaupf").value == "pfa") {
        document.getElementById("company").disabled=false;
    }
    else
    if(document.getElementById("pjsaupf").value == "pja") {
    document.getElementById("company").disabled=false;
    } 
}

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
        <option value="nu">Nu se aplica</option>
        <option value="pfa">Persoana Fizica Autorizata PFA</option>
        <option value="pja">Persoana Juridica Autorizata PJA</option>   
</select>

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

【讨论】：

我也尝试过使用 Microsoft edge..文本输入的行为没有改变。有时它们都没有启用..我在本地主机上运行，也许这就是问题？
@Anais 他们？如复数？你唯一给我们看的一个
我也使用 localhost 检查过（在 chrome 和 firefox 上）。它工作得很好。
@ArleighHix 我的意思是无论我选择哪个选项，公司都不会将其状态更改为启用。对不起
@ShubhamAgrawal 添加了 2 个捕获

【解决方案2】：

它似乎确实可以按原样工作，但是我想建议一种更简化的方法：

function changeState() {
  // this one Boolean comparison is the value you need
  document.getElementById("company").disabled = (document.getElementById("pjsaupf").value == "nu");
}

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
  <option value="nu">Nu se aplica</option>
  <option value="pfa">Persoana Fizica Autorizata PFA</option>
  <option value="pja">Persoana Juridica Autorizata PJA</option>
</select>

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

【讨论】：

当我在问题描述中选择应将公司更改为启用的选项时，我添加了 2 个页面捕获
是的，但它们没有任何帮助。您的第一个 javascript 适用于您共享的 html。必须有其他一些正在运行的脚本或 css 使其保持禁用状态。您是否清除了缓存并进行了硬重新加载？
捕获确实表明您至少在帖子中没有的元素上设置了一些样式。