如何启用/禁用单选按钮交互的文本字段？答案

【问题标题】：How to enable/disable text field on radio button interaction?如何启用/禁用单选按钮交互的文本字段？
【发布时间】：2011-07-12 08:25:03
【问题描述】：

无法让它工作。第一次使用传递给函数的变量。取消选中单选按钮应禁用表单字段，反之亦然。 lineid 变量将此单选/文本输入对与其他 10 个输入对区分开来。

我的代码：

<script type="text/javascript">
function disablefield(lineid){ 
if (document.getElementById(lineid).checked == true){ 
document.dupedit.lineid.disabled = false;
} else { 
document.dupedit.lineid.disabled = true;
} 
}
</script>

我的 HTML 的子集。

【问题讨论】：

id 以整数开头是无效的。不确定它是否会导致您的问题，但您可能想看看。
@kissmyface - 不在 HTML5 中：mathiasbynens.be/notes/html5-id-class
@James 当然你是对的 :-) 尽管出于习惯，我仍然这样做。看起来像这样的 id（通常）不是太语义化。我可能会改用 data 属性。

标签： javascript forms dom

【解决方案1】：

您需要将一个字符串传递给您的disablefield 函数，因此在传递它时将值放在引号中。类似于：

<input onclick="disablefield('2671997')" />

这是因为document.getElementById 需要一个字符串，而不是整数。

其次，要启用/禁用该字段，您需要使用disabled = true; 而不是= 'disabled'。

document.dupedit.lineid 正在寻找名称为“lineid”的字段，该字段在您的表单中不存在。我建议给该字段一个id，然后再次使用document.getElementById。

如果您想继续使用name 属性，则必须改用document.getElementsByName。这将返回一个匹配元素的数组（因为多个元素可以共享相同的名称），但是如果在您的代码中您知道所讨论的元素是唯一具有该名称的元素，您可以这样做：

document.getElementsByName(lineid)[0].disabled = true;

你可以看到一个工作版本（我认为这就是你想要的）here。而here 是使用getElementsByName 的版本。

【讨论】：

谢谢 - 尝试过，并根据以下内容更正了缺失的大括号，但它仍然无法正常工作。更新代码。抱歉 - 刚刚看到您的编辑并正在处理它们。
嗯，我认为在名称中使用 lineid 会将其替换为传递给函数的值。例如。 document.dupedit.$lineid PHP 用语？无论如何要这样做？
@Dan - 查看我的最新编辑。我肯定会建议使用id 而不是name。

【解决方案2】：

您在函数上缺少右大括号：

function disablefield(lineid){ 
if (document.getElementById(lineid).checked == true){ 
document.dupedit.lineid='enabled';
}else{ 
document.dupedit.lineid='disabled';
} 
} //<-- here

另外，我建议你将this 传递给函数。那你就不用打电话getElementById

<input onclick='disablefield(this)' type.....

function disablefield(obj){ 
    if (obj.checked == true){ 
        document.dupedit.lineid='enabled';
    }else{ 
        document.dupedit.lineid='disabled';
    } 
}

【讨论】：

【解决方案3】：

我认为你需要重新思考代码。

不要在复选框上使用 ID。最好将该 ID 移动到您要禁用/启用的文本字段，并检查该字段是否已禁用/启用，而不是复选框本身
使用更干净的 JS。

请看the jsFiddle，我已经为你整理好了。它符合你的预期吗，丹？

【讨论】：