Javascript 根据选择下拉选择将输入字段更改为禁用或启用

我正在尝试根据下拉列表的选择启用或禁用输入字段

在这里修改代码：

在本例中，您将看到三个使用jquery datepicker的日期字段

其思想是，当页面首次加载时，：Hold start date和Hold end date的输入字段将是：Not DISPLAY或disabled

如果选择“等待，直到候选人可用”，则等待开始日期和等待结束日期均为激活/可见。如果选择“保留直到位置可用”，则仅保留开始日期为活动/可见

我发现一个脚本可以工作，但当我在我的页面上尝试它时，它不工作

短暂性脑缺血发作

我发现一个脚本可以工作，但当我在我的页面上尝试它时，它不是 工作

如果脚本在JSFIDLE上工作，而不是在您的站点上，那么可能需要检查以下内容

如果jQuery添加成功

您已将代码放入document.ready函数中

*编辑：*基于OP的评论

在change event中，您正在使用val（）将值与文本进行比较，您应该将文本与值而不是文本进行比较

改变

到

我发现一个脚本可以工作，但当我在我的页面上尝试它时，它不是 工作

如果脚本在JSFIDLE上工作，而不是在您的站点上，那么可能需要检查以下内容

如果jQuery添加成功

您已将代码放入document.ready函数中

*编辑：*基于OP的评论

在change event中，您正在使用val（）将值与文本进行比较，您应该将文本与值而不是文本进行比较

改变

到

---

我刚看过剧本，有几件事你想改变

1） 而不是css中的显示：无更改为可见性：隐藏 2） 当javascript返回选定的_项时，它返回下拉列表的值，而不是文本，因此您需要检查（选定的_项==“3”）或您需要的任何数字

---

这应该可以解决问题。

我刚刚看了一下脚本，有几件事你想改变

1） 而不是css中的显示：无更改为可见性：隐藏 2） 当javascript返回选定的_项时，它返回下拉列表的值，而不是文本，因此您需要检查（选定的_项==“3”）或您需要的任何数字

---

这应该可以解决问题。

您能解释一下什么不起作用，并删除额外的代码和控件以使其变得简单吗？-更新的小提琴。其想法是，如果我选择：无-则保留开始日期和保留结束日期都不处于活动状态。SCD处于活动状态-如果我选择在候选人可用之前保持，则所有3个日期保持开始、保持结束和SCD都处于活动状态。如果我选择保持直到位置可用，则只有保持开始和SCD处于活动状态。感谢您有机会尝试document.ready。这是最后一步。谢谢大家的帮助。现在，转到下一个问题。我相信我很快就会回来的！您能否解释一下什么不起作用，并删除额外的代码和控件以使其变得简单更新的小提琴。其想法是，如果我选择：无-则保留开始日期和保留结束日期都不处于活动状态。SCD处于活动状态-如果我选择在候选人可用之前保持，则所有3个日期保持开始、保持结束和SCD都处于活动状态。如果我选择保持直到位置可用，则只有保持开始和SCD处于活动状态。感谢您有机会尝试document.ready。这是最后一步。谢谢大家的帮助。现在，转到下一个问题。我相信我很快就会回来的！我来看看。谢谢，谢谢！成功了！我真的很感激。也许有点太早了。。这在JSFIDLE中实现了，但在我调整页面上的代码时仍然存在问题。我做的一件事是使用引导中的.invisible类。它很好地隐藏了输入字段，但是在更改代码之后，如果使用了.invisible，则从下拉列表中看它将不起作用。小提琴应该随着变化而更新，并在那里工作。只是不在acutal代码中。很高兴我可以Hlpe，正如建议的那样，您可以提供您的实际代码。可能很难做到，代码在后端的ColdFusion上运行。我非常乐意以任何其他可能的方式帮助发布它。我愿意接受建议，我会看看的。谢谢，谢谢！成功了！我真的很感激。也许有点太早了。。这在JSFIDLE中实现了，但在我调整页面上的代码时仍然存在问题。我做的一件事是使用引导中的.invisible类。它很好地隐藏了输入字段，但是在更改代码之后，如果使用了.invisible，则从下拉列表中看它将不起作用。小提琴应该随着变化而更新，并在那里工作。只是不在acutal代码中。很高兴我可以Hlpe，正如建议的那样，您可以提供您的实际代码。可能很难做到，代码在后端的ColdFusion上运行。我非常乐意以任何其他可能的方式帮助发布它。我愿意接受建议。

$('#getHoldStatus').change(function()
                    {
                        var selected_item = $(this).val()
                        if(selected_item == "On Hold until Candidate Available"){
                            $('#datepicker').val("").removeClass('hidden');
                        }
                        else
                        {
                            $('#datepicker').val(selected_item).addClass('hidden');
                        }
                    }
                    );

if(selected_item == "On Hold until Candidate Available"){

if(selected_item == "3"){