Question

我正在使用Bootstrap 3.0用于Ruby on Rails 4.2.5，我需要这样做，以便在用户选择选项＆＃34; No＆＃34;从下拉菜单中，向他们显示下一个文本字段，否则，文本字段将保持隐藏状态。我已经在这个解决方案中找到了类似的问题，但我无法使用Bootstrap表单实现它，这是我的尝试：

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

切换输入（应显示＆＃34;否＆＃34;被选中）：
<%= 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，但它仍然无效。

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

参考：这是我收到此代码的问题 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;
  }
}

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

CODEPEN EXAMPLE

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

尝试：

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

<强> JS

List<Object>

同时检查https://jsfiddle.net/k5gy365k/3/

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

3 个答案:

CODEPEN EXAMPLE