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

Posted 2023-05-09

【中文标题】使用 simple_form、haml 和 jquery 基于单选按钮选择切换字段

【英文标题】：Toggle fields based on radio button selection with simple_form, haml, and jquery

【发布时间】：2018-07-23 08:32:27

【问题描述】：

我的表单中有一个单选按钮。如果选择了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()，该字段将按预期隐藏。

【参考方案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 />

【讨论】：

您的回答非常有效。至少我需要的部分。哈哈。 Rails 处理$(document).ready 部分。用户要么有工作签证，要么没有工作签证，我使用单选按钮，你给出“是”或“否”。如果“是”，我希望他们输入到期日期。我删除了第一位$('#work-visa-exp').hide();，因为它只是用于测试。我粘贴了您的 $('input[type... 函数来代替我拥有的函数，并且效果很好。非常感谢。

乐于帮助@Josh