Javascript 在Bootstrap 3.0中从下拉菜单选择时切换元素

我正在为RubyonRails使用Bootstrap

3.0

，我需要这样做，当用户从下拉菜单中选择“否”选项时，下一个文本字段将显示给他们，否则，文本字段将保持隐藏状态。我在这个解决方案中发现了一个类似的问题，但我无法用引导表单实现它，这是我的尝试：

下拉输入：

切换输入（选择“否”时应显示）：

Javascript:`

 ("selectpicker").change(function changetextbox());
 function changetextbox()
{
    if (document.getElementById("selectpicker").value === 0 ) {
        document.getElementById("sdd").disable='true';
    } else {
        document.getElementById("sdd").disable='false';
    }
}

`

我尝试将

value==0

更改为

value==0

，将

0

更改为

No

，但仍然不起作用

它们在我的代码中的顺序是这样的，但我不确定这应该如何处理引导表单标记。提前谢谢

参考：这是我从中得到这个代码的问题

您忘记了

$

并且没有

选择器

选择器，在使用jQuery（取决于您的HTML）时，您必须使用类或ID，如

。选择器

或

#选择器

没有

禁用

，您必须使用

禁用

，并且不能对

真

和

假

使用引号

您不能使用

.change（函数changetextbox（））

，只需使用

$（文档）。在（'change'，'#selectpicker'，changetextbox）

0

必须用引号括起来

我假设您的文本区域仅被禁用（未被CSS隐藏）

您忘记了

$

并且没有

选择器

选择器，在使用jQuery（取决于您的HTML）时，您必须使用类或ID，如

。选择器

或

#选择器

没有

禁用

，您必须使用

禁用

，并且不能对

真

和

假

使用引号

您不能使用

.change（函数changetextbox（））

，只需使用

$（文档）。在（'change'，'#selectpicker'，changetextbox）

0

必须用引号括起来

我假设您的文本区域仅被禁用（未被CSS隐藏）

---

你需要更新你的代码

HTML

<select id="selectbox" name="mfi_4_a_i">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<input type="text" name="mfi_4_a_ii" id="sdd" />

请参见示例：

如果您想要更干净的jquery方式，您可以更新JS代码，如下所示

var selectbox = $("#selectbox"),
    textbox = $("#sdd");  

selectbox.change(function() {
     changetextbox();
});

function changetextbox(){
    if (selectbox.val() === '0') {
        textbox.prop('disabled', true);
    } else {
        textbox.prop('disabled', false);
    }
}

---

示例：

您需要更新代码

HTML

<select id="selectbox" name="mfi_4_a_i">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<input type="text" name="mfi_4_a_ii" id="sdd" />

请参见示例：

如果您想要更干净的jquery方式，您可以更新JS代码，如下所示

var selectbox = $("#selectbox"),
    textbox = $("#sdd");  

selectbox.change(function() {
     changetextbox();
});

function changetextbox(){
    if (selectbox.val() === '0') {
        textbox.prop('disabled', true);
    } else {
        textbox.prop('disabled', false);
    }
}

示例：

尝试：

<select id="selectbox" name="mfi_4_a_i">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<input type="text" id="sdd" disabled="true" />

同时检查并尝试：

<select id="selectbox" name="mfi_4_a_i">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<input type="text" id="sdd" disabled="true" />

也检查