Javascript 如何显示“如果”的文本框；“其他”；选中复选框组中的选项

当从一组复选框中选中“其他”选项时，我想使用JavaScript显示一个文本框。我正在使用带有asp.net core 2.2的razor页面

我正在使用以下脚本，但它不起作用

   function onSelectChange() {
        var sel = document.getElementById('QuestionOptionId');
        var strUser = sel.options[sel.selectedIndex].text; 


       if (strUser.startsWith('Other'))
                document.getElementById('textBox').disabled = false;          

       else
            document.getElementById('textBox').disabled = true;  
    }
</script>

每当用户选中“其他”复选框时，它都会显示一个文本框。 我做错了什么？我已经读了很多其他的答案，但没有弄明白这一个

更新-1

我不知道为什么帖子没有显示文本框控件。。。 我再次将其粘贴到这里，它位于foreach循环之外。我删除了尖括号，因为我认为它与格式混合在一起

---

input type=“text”id=“textBox”name=“response”disabled=“disabled”

完全公开：我从未使用过Razor页面或asp.net

我很难理解javascript是如何检测其他选项是否被选中的。看起来您的Fruits.cshtml将使用相同的“QuestionOptionId”id生成三个单独的输入

此外，您的Fruits.cshtml剪接没有包含您想要启用的文本框的代码，尽管我假设您在编译的HTML中有一个id为“textbox”的文本框，您想要启用它

我将为此更改您的脚本：

function onSelectChange(element) {
  if (element === element.parentNode.querySelector(".other")) {
    console.dir(element);
    if (element.checked) {
      document.getElementById("textBox").disabled = false;
    } else {
      document.getElementById("textBox").disabled = true;
    }
  }
}

您需要将“其他”类添加到适用的“其他”输入复选框中。您还需要更改Fruits.cshtml代码段，以便“onclick”函数也将适用的元素传递到脚本中

@foreach (var option in Model.QuestionOptions)
{
    <input type="checkbox"  asp-for="QuestionOptionId"   id ="QuestionOptionId"  value ="@option.Value" onclick="onSelectChange(this)" />  @option.Text<br />              
}

@foreach（Model.QuestionOptions中的var选项）
{
@选项。文本

}

---

下面是编译代码的工作示例：

在视图和javascript中尝试以下修改：

在输入外部添加标签

@foreach (var option in Model.QuestionOptions)
{
   <Lable>
       <input type="checkbox" asp-for="QuestionOptionId" id="QuestionOptionId"  value="@option.Value"  /> @option.Text
   </Lable>
   <br />
}
<div>
    <input type="text" id="textbox" disabled="disabled" />
</div>

更新

如果要隐藏文本框并在取消选中“其他”选项时隐藏文本框，首先可以将

disabled

属性更改为

hidden

，然后确定文本框在js中是否包含

hidden

属性，如下所示：

<input type="text" id="textbox" hidden />

if ($(this).parent().text().trim() === "Other")
   {
       if ($('#textbox').is(':hidden')) {
           $('#textbox').removeAttr("hidden");
        }
        else {
             $('#textbox').attr("hidden", "hidden");
             }
    }

如果（$（this）.parent（）.text（）.trim（）=“其他”）
{
如果（$（'#textbox'）。是（':hidden'））{
$（“#文本框”）.removeAttr（“隐藏”）；
}
否则{
$（'#textbox'）.attr（“隐藏”、“隐藏”）；
}
}

我在您的代码中的任何地方都看不到textBox控件。您需要在Fruits.cshtml中创建textBox控件。您的JS代码应用于下拉列表，并且视图中的id不唯一。您是否使用

？能否显示您在pagemodel中定义的表单代码和QuestionOptionId？谢谢，这是可行的。但是如何禁用文本当我取消选中“其他”选项时。选中该复选框后，文本框将被启用，但取消选中该复选框后，文本框不会被禁用。还有，我如何隐藏它而不是禁用它？@Aditi如果你发现我的解决方法有效，你能将我的回答标记为答案吗？这将帮助其他有同样疑问的人快速找到答案。非常感谢！是的，foreach循环正在生成三个选项。我不能使用class=“other”，因为我必须在单独的标记中提及每个复选框。我想通过foreach循环生成复选框选项，foreach循环从数据库中获取复选框。

@foreach (var option in Model.QuestionOptions)
{
   <Lable>
       <input type="checkbox" asp-for="QuestionOptionId" id="QuestionOptionId"  value="@option.Value"  /> @option.Text
   </Lable>
   <br />
}
<div>
    <input type="text" id="textbox" disabled="disabled" />
</div>

$('input:checkbox').on('click', function () {
            if ($(this).parent().text().trim() === "Other") {
                $('#textbox').removeAttr("disabled");
            }
        });

<input type="text" id="textbox" hidden />

if ($(this).parent().text().trim() === "Other")
   {
       if ($('#textbox').is(':hidden')) {
           $('#textbox').removeAttr("hidden");
        }
        else {
             $('#textbox').attr("hidden", "hidden");
             }
    }