【问题标题】:How to manually group Radio Buttons Rails 4如何手动分组单选按钮 Rails 4
【发布时间】:2014-12-29 19:01:53
【问题描述】:

每个表格行都有 2 个单选按钮。我需要他们以每行中只能单击一个按钮的方式工作。这是代码,其中每列只能选择一个,因为如果它们具有相同的 name 属性,rails 会自动对它们进行分组

        ...<tbody>
        <% users_in_group(params[:group_id], params[:event]).each do |user| %>
            <tr>
                <td><%= user.fname + " "+user.lname %></td>
                <td>fill</td>
                <td>fill</td>
                <td><%= radio_button_tag 'project[absent_user_ids][]', user.id, false %></td>
                <td><%= radio_button_tag 'project[tardy_user_ids][]', user.id, false %></td>
            </tr>
        <%end%>
        </tbody>...

这里的问题是我不想更改名称参数,因为我不得不重新实现控制器......如果你能帮助我让复选框以类似的方式运行,我会回答。

【问题讨论】:

  • 单选按钮设计为只允许您选择一个。使用复选框和 javascript 只允许检查一个(并在您的控制器中仔细检查)。
  • 是的,这就是为什么 RB 会更好地满足我的需求。我只是不知道如何覆盖 Rails 按名称属性对它们进行分组的方式。
  • 我认为您误解了我的评论。 Rails 没有对单选按钮进行分组,HTML 的规则是。您只能选择一个具有相同名称的选项。如果你不能有不同的名字,你就不能使用单选按钮。
  • 是的,我已经意识到了。尝试用js做复选框,但是我的js技术很差。

标签: jquery forms ruby-on-rails-4 checkbox grouping


【解决方案1】:

经过数小时的战斗和 ptd 的建议,这里是一些人可以参考的解决方案。以下是表单标签:

...<tbody>
    <% users_in_group(params[:group_id], params[:event]).each do |user| %>
        <tr>
            <td><%= user.fname + " "+user.lname %></td>
            <td>fill</td>
            <td>fill</td>
            <td><%= radio_button_tag 'project[absent_user_ids][]', user.id, false %></td>
            <td><%= radio_button_tag 'project[tardy_user_ids][]', user.id, false %></td>
        </tr>
    <%end%>
    </tbody>...

请注意,我已将它们保持不变。我在这里对它们进行分组的方式是按值,因此对于缺席和迟到的值(user.id)将是相同的,但对于每次迭代都是不同的。

这是我挖掘并修改以进行选择的 jQuery。

 $("input:checkbox").on('click', function() {
    var $box = $(this);
    if ($box.is(":checked")) {
       var group = "input:checkbox[value='" + $box.attr("value") + "']";
       $(group).prop("checked", false);
       $box.prop("checked", true);
    } 
    else {
       $box.prop("checked", false);
    }
 });

基本上,这提供了单选按钮本身的功能,但允许您取消选中复选框。我按值属性而不是名称来获取和分组框,这允许 mw 在缺席和迟到的参数数组下将输入提交给控制器。

请随时纠正我。这行得通,但它可能不像它应该的那样漂亮和闪亮。

【讨论】:

    猜你喜欢
    • 2014-04-10
    • 1970-01-01
    • 2011-01-25
    • 2015-06-25
    • 1970-01-01
    • 2010-11-23
    • 2012-05-19
    • 1970-01-01
    • 2017-12-22
    相关资源
    最近更新 更多