从Bootstrap 3.0的下拉菜单中选择切换元素

Question

我正在使用Bootstrap 3.0 for Ruby on Rails 4.2.5 ，我需4.2.5 ，以便当用户从下拉菜单中选择“否”选项时，会以这种形式显示下一个文本字段，否则，文本字段仍然隐藏。 我在这个解决方案中找到了一个类似的问题，但我无法使用Bootstrap表单实现它，这是我的尝试：

下拉输入： <%= f.select :answer, [["Yes", 1], ["No", 0]], label: "Do you wish to bla bla? ", class: "selectpicker", Id: "selectpicker" %>

切换输入（应该在选择“否”时显示）：
<%= f.text_area :explain , label: "Please explain why not", Id: "sdd"%>

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 ，但它仍然无效。

它们按此顺序存在于我的代码中，但我不确定这应该如何与引导程序表单标记一起使用。 提前致谢。

参考 ：这是我从下拉菜单中选择启用/禁用文本框的代码的问题

Answer 1

$(document).on('change', '#selectpicker', changetextbox);

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

1. 您忘记了$并且没有selectpicker选择器，当您使用jQuery（取决于您的HTML）时，您必须使用类.selectpicker或#selectpicker等类或ID。
2. 没有disable ，你必须使用disabled ，你不能使用引号为true和false 。
3. 你不能使用.change(function changetextbox()) ，只需使用$(document).on('change', '#selectpicker', changetextbox) 。
4. 0必须是引号。
5. 我假设您的textarea仅被禁用（不被CSS隐藏）。

CODEPEN示例

Answer 2

你需要更新你的代码，

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" />

JS

$("#selectbox").change(function() {
     changetextbox();
});

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

请参阅示例： https ： //jsfiddle.net/8mag64es/6/

如果你想要更清晰的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);
    }
}

示例： https ： //jsfiddle.net/8mag64es/8/

Answer 3

试试：

<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" />

JS

$(function(){
    var $sdd = $('#sdd');
    $('#selectbox').on('change', function(){
    if($(this).val()==='0'){
        $sdd.prop("disabled", false);
    }else{
        $sdd.prop("disabled", true);
    }
  })
});

另请查看https://jsfiddle.net/k5gy365k/3/