Question

我有一个表单，我需要用户选择（使用单选按钮）一个选项，该选项将决定它下面的下一个表单字段。在这种情况下，他们的帖子可以是帖子或帖子的修订版。因此，选择“发布”将显示标题字段（以命名帖子），选择“修订”将显示可供选择的现有帖子的选择列表（标题将被继承）。

_form.html.erb

<!--Form inputs-->

<%= f.collection_radio_buttons :is_revision, [[false, 'Post'] ,[true, 'Revision']], :first, :last %>
<%= f.input :revision_id, collection: @originals, :input_html => {:id => 'revision'} %>
<%= f.input :title, :input_html => { :maxlength => '50', :placeholder => 'Title', :id => 'title'} %>

<!--Javascript-->

<script type="text/javascript">
$('input[name="post[is_revision]"]').on("change", function(){
    if ( $("#post_is_revision_true").attr("checked")){
        $("#title").hide();
        $("#revision").show();
    }
    if ( $("#post_is_revision_false").attr("checked")){
        $("#revision").hide();
        $("#title").show();
    }
});
</script>

我应该提一下，这在隐藏和显示一个字段时工作正常，但是当选择其他单选按钮时没有任何变化。我觉得逻辑是正确的（虽然我不是最强的JS）但我似乎无法得到它。

Answer 1

编辑：我犯了一些jQuery错误。另外，here is a jsFiddle example

试试这个。

$('input[name="post[is_revision"]').change(function() {
    var selected = $('input:checked[name="post[is_revision]"]').val();
    if(selected == 'revision') {
        $('#title').hide();
        $('#revision').show();
    } else if(selected == 'new_post') {
        $('#revision').hide();
        $('#title').show();
    }
});

另一种方法，更小但更令人困惑：

$('input[name="post[is_revision"]').change(function() {
    var is_revision = $('input:checked[name="post[is_revision]"]').val() == "revision";

    $('#title').toggle(!is_revision);
    $('#revision').toggle(is_revision);
});

如果始终首先选择一个，您可以将其浓缩为：

$('input[name="post[is_revision"]').change(function() {
    $('#title').toggle();
    $('#revision').toggle();
});

或者是踢腿和咯咯笑和幻灯片：

$('input[name="post[is_revision"]').change(function() {
    $('#title').slideToggle();
    $('#revision').slideToggle();
});

评论您是否遇到任何问题。

使用simple_form隐藏/显示基于无线电选择的字段

1 个答案: