1

次のような 2 つの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"} %>

ユーザーが最初のフィールドで「はい」を選択した場合にのみ、2 番目のフィールドを表示したい。私のJquery： 

$(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>

しかし、動的フィールドは機能していません。ここで何が問題なのですか？

または、これを達成するためのより良い方法を提案してください。

4

1 に答える 1