Question

我的表单中有一个单选按钮。如果选择true，我希望显示其他字段。如果false，我希望隐藏其他字段。我已经尝试了几种可能的解决方案，我在SO上找到但似乎都没有。

以我的形式：

%fieldset
  %legend
    Visa & Passport
  .form-group
    = f.input :work_visa, as: :radio_buttons, label: "Do you have a work visa?", collection: [['Yes', true], ['No', false]], checked: true, item_wrapper_class: 'radio-inline', wrapper_html: { id: 'work-visa'}
    = f.input :visa_exp_date, label: 'Visa Expiration Date', item_wrapper_class: 'form-inline', class: 'col-xs-4', wrapper_html: { id: 'work-visa-exp'}

在页面底部：

:javascript  
  $('#work-visa-exp').show();    
  $('input[type=radio]').on("change", function(){
    if($(this).prop('id') == "work-visa") {
      $('#work-visa-exp').toggle();
    }
  });

我很确定错误在我的JS中。如果我注释掉$('#work-visa-exp').show();以外的所有内容并将.show()更改为.hide()，则该字段会按预期隐藏。

Answer 1

根据您的说明，您需要一个复选框而不是单选按钮。

请查看以下内容：

＆＃13;

$(document).ready(function() {
  $('#work-visa-exp').hide();
  $('input[type=checkbox]').on("change", function() {
    if ($(this).prop('id') == "work-visa") {
      $('#work-visa-exp').toggle();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="work-visa" value="">
<input type="text" name="vehicle" id="work-visa-exp" value="">

＆＃13;

如果您正在使用其他单选按钮（不同类型的签证）。然后你可以尝试下面。

使用此选项，您必须检查所选单选按钮的值，而不是ID。

＆＃13;

$(document).ready(function() {
  $('#work-visa-exp').hide();
  $('input[type=radio]').on("change", function() {
    if ($(this).val() == "work-visa") {
      $('#work-visa-exp').show();
    } else {
      $('#work-visa-exp').hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="visa" value="work-visa"> Work Visa <input type="text" name="vehicle" id="work-visa-exp" value=""> <br />
<input type="radio" name="visa" value="other-visa"> Other Visa <br />
<input type="radio" name="visa" value="some-visa"> Some Visa <br />

＆＃13;

使用simple_form，haml和jquery基于单选按钮选择切换字段

1 个答案: