Запускайте JavaScript только в том случае, если установлен переключатель

Question

Я хочу что-то довольно простое для моего приложения на Rails: JavaScript должен запускаться, только если была отмечена одна из предыдущих переключателей. То, что я хочу, это то, чтобы пользователь показывал ему разные радиокнопки, без проверки по умолчанию. Когда он нажимает кнопку «Выполнить», расположенную под переключателями, два случая:

• , пользователь установил переключатель, затем запускается JavaScript (div скрыт, а другой показан). )
• пользователь не проверял радио-кнопку, ничего не происходит (даже более того: браузер сообщает пользователю, что он должен проверить радио-кнопку, но это легко сделать с помощью опции :required => true в радиокнопка)

Код, который я пробовал:

HTML.erb код

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

Мне удалось только заставить код работатьщелкните, независимо от того, заполнена ли форма или нет.

код jquery

$(document).on("click", "#upload_button", function() {
    $("#to_show").show();
});

$(document).on("click", "#upload_button", function() {
    $("#to_hide").hide();
});

Код jquery находится в моем application.js в папке активов.

Я бы ожидал что-то подобное, находящееся в том же файле, что и HTML-код, который я предоставил:

Ожидаемый ответ

<% if form_with.filled %>
    $(document).on("click", "#upload_button", function() {
        $("#to_show").show();
    });

    $(document).on("click", "#upload_button", function() {
        $("#to_hide").hide();
    });
<% end %>

Я нашелнекоторые другие вопросы, тесно связанные с этой проблемой, но каждый раз условие было «простым» условием на объекте, ноt не связан с самой формой.

Я использую Rails 5.2.3 и jquery 3.2.1

Спасибо.

EDIT

Благодаря этому вопросу: Узнать, проверена ли радиокнопка с помощью JQuery? , я добился определенного прогресса.

HTML.erb code

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1', :id => 'button_check' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2', :id => 'button_check' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

код jquery

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_show").show();
    }
});

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_hide").hide();
    }
});

Итак, теперь он не выполняет jquery, когда ни одна кнопка не отмечена, но даже если переключатель отмечен, он неказнен, но я не мог понять, что я сделал не так.

Answer 1

Ваша вторая попытка ближе, но для того, чтобы выполнить обе радиокнопки, нужно будет проверить, так как они имеют одинаковый идентификатор. Попробуйте добавить поле имени и использовать это:

if($("input:radio[name='name_here']").is(":checked")){

}

Это вернет FALSE, если все элементы на входах не отмечены, и TRUE, если элемент отмечен.