Рельсы формы: форма изменения поля из ранее выбранных полей

Question

У меня есть два 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"} %> 

Я хочу показать второе поле только тогда, когда пользователь выбирает «Да» для первого поля. Моего 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> 

Но динамические поля не работают. Что здесь не так?

Или предложите лучший способ достичь этого.

Answer 1

Прежде всего, вы не можете разместить идентификатор на входах, потому что в итоге вы получите два входа с одинаковыми параметрами, и jQuery найдет только первый. Во-вторых, вам нужно использовать $ (this) внутри вашего обработчика.

Вам нужно STH в строке:

<%= 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") 
})();