我有两个像这样的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>
但是动态字段不起作用。怎么了
或提出任何更好的方法来实现这一目标。
首先,您不能在输入上放置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")
})();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句