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

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

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

请检查以下内容：

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

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

---

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

有了这个，您必须检查所选单选按钮的值，而不是 id。

$(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();
    }
  });
});

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