切换禁用/启用 3 个依赖输入文本框答案

【问题标题】：Toggle Disabling/Enabling of 3 dependent input textbox切换禁用/启用 3 个依赖输入文本框
【发布时间】：2011-11-14 01:12:22
【问题描述】：

我有这个部分，用户可以在其中定义他/她从网站获得的搜索结果的过滤。

硬盘价格 ($)
硬盘容量 (GB)
最大。每 GB 成本 ($/GB)

用户可以更改所有 3 个。但是，由于有 2 个自变量定义了 3 个值，因此单独选择 3 个过滤器值可能会产生 0 个结果。 IE。 $300 harddisk, 100GB & Lesser than $1/GB。解决方案是只允许用户在任何时候更改 3 个过滤器选项中的任何 2 个，并自动确定第 3 个过滤器的值。

问题： 我需要这样的启用/禁用行为：当用户选择过滤器 #1 (price of harddisk = $100) 然后过滤器 #2 (harddisk capacity = 100GB)，当他选择一个值时过滤器#3 ($5/GB)，#1 将自动重新计算为$500。如果他要更改过滤器#1 (harddisk cost = $200)，那么过滤器#2 将根据过滤器#1 和#3 更改为Capacity of Harddisk = $40。

如何在 jQuery/Javascript 中实现这一点？

我的想法：可以使用仅包含 2 个值的堆栈之类的东西，按照选择过滤器的顺序。当用户选择过滤器 #1 然后选择 #2 时，堆栈包含 {1, 2}，因此过滤器 #3 将使用过滤器 #1 和 #2 计算。当用户然后选择 #3 时，1 被推出堆栈，3 进入导致 {2,3} 因此过滤器 #1 将使用过滤器 #2 和 #3 计算。但是，这种方法似乎有些问题......

【问题讨论】：

是否有明确的顺序，您希望它覆盖以前输入的值？在您的示例中，在输入 1 和 2 后，将 3 添加到您使其覆盖 1，在这种情况下是否可以覆盖 2？
它将覆盖 2 中较旧的。所以在你指出的情况下，它只能覆盖 1，因为先选择 1 然后选择 2。

标签： javascript jquery html forms

【解决方案1】：

您还可以为每种可能性设置一个隐藏的 div。

<div id="opt1" style="display: none;">
<code to make calculation for option 1>
</div>

他们都将从显示值 none 开始，当他们做出选择并单击计算按钮时，它会启动您的 js 函数。该函数检查哪两个输入是 != null 并使用它们的值来计算和显示它们的答案。匹配的 div 可以通过将适当的 div 名称传递给一个简单的函数来显示，如下所示：

 function ShowContent(d)
 {
  document.getElementById(d).style.display = "block" 
 }

【讨论】：