每行导轨互斥复选框答案

【问题标题】：Mutually exclusive checkboxes per row rails每行导轨互斥复选框
【发布时间】：2014-07-26 03:06:51
【问题描述】：

我正在构建一个与后端服务通信的 Rails 站点，该后端服务返回一组对象的列表。 UI 然后打印出表格中的对象值列表，并允许用户拒绝或批准行，并为每行设置一个批准和拒绝复选框。我想知道是否有一种方法可以一次只检查一个复选框，因为它们应该是互斥的。查看代码如下

<td><%= check_box_tag 'approve_request_ids[]', e.request_id %></td>
<td><%= check_box_tag 'decline_request_ids[]', e.request_id %></td>

【问题讨论】：

单选按钮是你想要的。
但是单选按钮不允许用户在没有刷新的情况下选择它们后取消选择
您可以添加none 或类似选项。

标签： html ruby-on-rails ruby

【解决方案1】：

一种只允许一次选中一个复选框的方法

我最初的想法是使用单选按钮 - 根据 cmets，您需要提供“取消选择”按钮的规定，这可以通过 JS 实现。

让我详细说明您将如何执行此操作，以及您将如何处理复选框：

单选按钮

你可以使用单选按钮——你必须这样做，所以如果你点击一个被“选中”的按钮，JQuery 会“取消选择”它：

How to check/uncheck radio button on click?

JSFiddle

#app/views/controller/your_view.html.erb
<table>
    <tr>
        <td><input type="radio" name="sex" value="male">Male</td>
        <td><input type="radio" name="sex" value="female">Female</td>
    </tr>
</table>

#app/assets/javascripts/application.js
$("tr").on("mousedown", ":radio", function(){
  var $self = $(this);
  if( $self.is(':checked') ){
    var uncheck = function(){
      setTimeout(function(){$self.removeAttr('checked');},0);
    };
    var unbind = function(){
      $self.unbind('mouseup',up);
    };
    var up = function(){
      uncheck();
      unbind();
    };
    $self.bind('mouseup',up);
    $self.one('mouseout', unbind);
  }
});

复选框

JSFiddle

checkbox 可以用 JS 来“取消选中”——你要做的就是用 JS 捕捉“check”动作，然后“取消选中”该行对应的复选框。这将确保您只能选择一个复选框，同时提供“无”选择：

#Table same setup as Tiago Farias


#app/assets/javascripts/application.js
$("tr").on("change", ":checkbox", function(){
   if( $(this).is(":checked") ) {
       $(this).parent().parent().find(":checkbox").not($(this)).attr('checked', false);
   }
});

【讨论】：

【解决方案2】：

你可以像这样使用 jquery 来做到这一点：

<table>
  <tr>  
    <td><%= check_box_tag 'approve_request_ids[]', e.request_id %></td>
    <td><%= check_box_tag 'decline_request_ids[]', e.request_id %></td>
  </tr>
</table>

你的 Jquery：

$('tr .checkbox').click(function () {
  var state = $(this).prop("checked");
  $(this)
      .parent()
      .parent()
      .find('input.checkbox:checked')
      .prop("checked", false);

  $(this).prop("checked", state);
});

【讨论】：