javascript根据另一个表单字段的值隐藏表单字段答案

【问题标题】：javascript hide form field based on value of another form fieldjavascript根据另一个表单字段的值隐藏表单字段
【发布时间】：2021-06-04 07:26:36
【问题描述】：

我在 HTML 表单上有以下两个字段：

<input type="hidden" name="Valid" id="Valid" value="True">

<input type="text" id="Address">

如果valid 输入的值为真，我需要一个JavaScript 方法来禁用address 输入。

请问我可以用什么来做到这一点？

我想我需要一种在Address 输入表单上切换disabled 的方法。

【问题讨论】：

有什么理由将验证结果保存到隐藏的 HTML 元素中？
不是验证结果。它只是一个字段，其值由后端进程确定

标签： javascript html

【解决方案1】：

您可以定义一个“onchange”事件，该事件在隐藏输入的值发生变化时触发。这是一个例子：Does HTML Hidden control have any events? Like onchange or something?

但是从阅读 cmets 来看，根本不需要 :-)

需要的是在页面加载时运行的逻辑。当有效值为 true 时，您的函数只需将 disabled-attribute 添加到该字段。

<input type="hidden" name="Valid" id="Valid" value="True">


<script>
// Define your function
function yourfunc() {
    var validValue = document.getElementById("Valid").getAttribute('value');
    if(validValue == 'True') {
        document.getElementById("Address").setAttribute('disabled', true);
    }
}
yourfunc(); // Call the function: is important, otherwise your code will never be run.
</script>

要再次删除 disabled-property，您可以查看此线程：.setAttribute("disabled", false); changes editable attribute to false

【讨论】：

感谢您这么快回来。 valid 的值不会改变。它正在后端制定，到页面加载时，该值将固定为 true 或 false。
valid的值应该什么时候改变？您尚未为 #Valid 的更改指定任何内容
在页面加载时，valid 将是 true 或 false，并将保持这种状态。为了这个问题，假设它总是正确的。谢谢
哦 - 这是一个完全不同的用例；我根据这些信息编辑了我的答案。请再次检查。

【解决方案2】：

如果有效输入的值为真，我需要一个 javascript 方法来禁用地址输入。

仅基于这一行，下面的代码应该可以工作

const validInput = document.querySelector('#Valid');
const addressInput = document.querySelector('#Address')

const toggleAddress = () => {
    const inputVal = validInput.value;
    
    if(inputVal === 'True') {
            addressInput.disabled = true
    }
}

toggleAddress()

虽然你的问题没有说明什么时候应该启用。

【讨论】：

感谢您。这对我有用 - 我已将第一个响应标记为答案，因为这是我使用的答案。