轨道表单 :从以前选择的字段中更改表单字段

Rails Forms : change form fields from previously selected fields

本文关键字：字段 表单 轨道 选择      更新时间：2023-09-26

>我有两个这样的simple_form字段： 

<%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], input_html: {id: "rationcard"} %>
<%= f.input :rationcardNum , label: "Ration Card No." ,input_html: {id: "rationcard_no"} %>

仅当用户为第一个字段选择"是"时，我才希望显示第二个字段。我的查询： 

$(function(){
    $("#rationcard").change(function(){
        if ($("#rationcard").val()=="Yes"){
            $("#rationcard_no").show();
        } else {
            $("#rationcard_no").hide();
        }
    })
})

我可以看到js文件包含在页面的头部。

生成的 HTML： 

<div class="control-group radio_buttons optional family_ration_card">
 <label class="radio_buttons optional control-label" for="rationcard">Ration card</label>
  <div class="controls">
   <label class="radio">
    <input id="rationcard" class="radio_buttons optional" type="radio" value="Yes" name="family[ration_card]" checked="checked">
Yes
   </label>
  <label class="radio">
   <input id="rationcard" class="radio_buttons optional" type="radio" value="No" name="family[ration_card]">
No
  </label>
 </div>
</div>  
<div class="control-group string optional family_rationcardNum">
 <label class="string optional control-label" for="rationcard_no">Ration Card No.</label>
  <div class="controls">
   <input id="rationcard_no" class="string optional" type="text" value="DGFR12" size="50" name="family[rationcardNum]">
  </div>
</div>

但是动态字段不起作用。这是怎么回事？

或者建议任何更好的方法来实现这一目标。

首先，你不能在输入上放置id，因为你最终会得到两个相同的输入，而jQuery只会找到第一个。其次，您需要在处理程序中使用 $（this）。

您需要排队：

<%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], wrapper_html: {id: "rationcard"} %>
<%= f.input :rationcardNum , label: "Ration Card No." ,wrapper_html: {id: "rationcard_no"} %>
$(function(){
    var toggle_rationcardNum = function(visible) {
        if (visible){
            $("#rationcard_no").show();
        } else {
            $("#rationcard_no").hide();
        }
    }
    $("#rationcard input").change(function(){
        toggle_rationcardNum($(this).val()=="Yes")
    })
    toggle_rationcardNum($("#rationcard input:checked").val()=="Yes")
})();
相关文章：