Felder basierend auf Radioauswahl mit simple_form einblenden/ausblenden

Question

Ich habe ein Formular, in dem der Benutzer (mit Radio-Buttons) eine Option auswählen muss, die das nächste Formularfeld darunter bestimmt. In diesem Fall kann ihr Beitrag ein Beitrag oder eine Überarbeitung eines Beitrags sein. Daher zeigt die Auswahl von 'Beitrag' ein Titelfeld an (um den Beitrag zu benennen) und die Auswahl von 'Überarbeitung' zeigt eine Auswahlliste von vorhandenen Beiträgen an, aus der ausgewählt werden kann (der Titel wird übernommen).

_form.html.erb

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

$('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();
    }
});

Ich sollte erwähnen, dass dies einwandfrei funktioniert, wenn ein Feld ausgeblendet und das andere angezeigt wird, aber wenn das andere Optionsfeld ausgewählt wird, ändert sich nichts. Ich glaube, die Logik ist korrekt (obwohl ich in JS nicht der Stärkste bin), aber ich scheine das nicht hin zu bekommen.

Answer 1

BEARBEITEN: Ich habe ein paar jQuery-Fehler gemacht. Außerdem ist hier ein jsFiddle-Beispiel

Versuch es mal.

$('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();
    }
});

Ein anderer Weg, es zu tun, kleiner aber verwirrender:

$('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);
});

Wenn immer eines zuerst ausgewählt wird, könntest du es auf das hier verkürzen:

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

Oder zum Spaß und lächeln und schieben:

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

Kommentieren Sie, wenn Sie Probleme mit einem haben.