通过javascript检查特定复选框时如何启用禁用文本框答案

【问题标题】：How to enable disable textboxes when particular checkbox is checked through javascript通过javascript检查特定复选框时如何启用禁用文本框
【发布时间】：2016-11-07 07:09:22
【问题描述】：

对于这个页面：

<input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk3" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk4" onclick="myFunction(this)" />

<input type="text" id="txt1" disabled="disabled" />
<input type="text" id="txt2" disabled="disabled" />
<input type="text" id="txt3" disabled="disabled" />
<input type="text" id="txt4" disabled="disabled" />

<script>
    function myFunction(el) {
        var txt = document.getElementById(el.id.replace('chk', 'txt'));

        if (el.checked) {
            document.getElementById(txt).removeAttribute("disabled");
        }
        else
            document.getElementById(txt).setAttribute("disabled", "disabled");
    }
</script>

我试过这个脚本，但它给出的错误是

"Microsoft JScript 运行时错误：'document.getElementById(...)' 是 null 或不是一个对象”

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

function myFunction(el) {
    var txt = document.getElementById(el.id.replace('chk', 'txt'));

    if (el.checked) {
        txt.removeAttribute("disabled");
    }
    else
        txt.setAttribute("disabled", "disabled");
}

See working demo。如果它仍然对你不起作用，只需将你的脚本移到 html 标记上方。

【讨论】：

使用此脚本未启用文本框

【解决方案2】：

使用此语句，您将修改文本框

var txt = document.getElementById(el.id.replace('chk', 'txt'))

但是你不应该使用这个

document.getElementById(txt).removeAttribute("disabled");

但是这个

txt.removeAttribute("disabled");

例如看小提琴

https://jsfiddle.net/zxrxcs5k/

【讨论】：

【解决方案3】：

var txt = el.id.replace('chk', 'txt');的用户

而不是 var txt = document.getElementById(el.id.replace('chk', 'txt'));

无需使用document.getElementById，因为您已经在myFunction(this) 中声明了元素

并应用disabled 和true | false

function myFunction(el) {
        var txt = el.id.replace('chk', 'txt');


        if (el.checked ) {
            document.getElementById(txt).disabled = false;
        }
        else
            document.getElementById(txt).disabled = true;
    }

<input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
<input type="checkbox" checked  id="chk3" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk4" onclick="myFunction(this)" />

<input type="text" id="txt1" disabled>
<input type="text" id="txt2" disabled>
<input type="text" id="txt3" disabled>
<input type="text" id="txt4" disabled>

【讨论】：

【解决方案4】：

您的脚本部分有错误：

var txt = document.getElementById(el.id.replace('chk', 'txt'));

这将返回 textbox 的整个元素而不是 id。如果你改成这个，它应该可以工作：

<script>
    function myFunction(el) {
        var txt = el.id.replace('chk', 'txt');

        if (el.checked) {
            document.getElementById(txt).removeAttribute("disabled");
        }
        else
            document.getElementById(txt).setAttribute("disabled", "disabled");
    }
</script>

您可以在 JSFiddle 中对其进行测试（请注意，在小提琴示例中，我还删除了您的 checkboxes 的 checked 属性）

【讨论】：