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

Question

我正在为 Ruby on Rails 4.2.5 使用 Bootstrap 3.0，我需要这样做，以便在用户从下拉菜单中选择“否”选项时，在此表单中，下一个文本字段是显示给他们，否则，文本字段将保持隐藏状态。我在这个解决方案中发现了一个类似的问题，但我无法用 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，但它仍然不起作用。

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

参考：这是我得到此代码的问题 Enable/disable of textbox on option selected from drop down menu

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 时，您必须使用类或ID，如.selectpicker 或#selectpicker（取决于您的HTML）。
2. 没有disable，必须使用disabled，并且true和false不能使用引号。
3. 你不能用.change(function changetextbox())，只能用$(document).on('change', '#selectpicker', changetextbox)。
4. 0 必须用引号引起来。
5. 我假设您的 textarea 只是被禁用（没有被 CSS 隐藏）。

CODEPEN EXAMPLE

Answer 2

试试：

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

Answer 3

你需要更新你的代码，

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/