Question

当我的用户注册时，他们必须选择三个安全问题并回答。在这个问题中，我有六个问题被定义为辅助方法，例如，这是一张图片

第一次选择后，有什么办法可以消除提示问题？例如，对于第一个问题，他们选择“您父亲的中间名是什么”。现在，对于第二个问题，他们无法再选择该提示性问题，因为他们已经第一次回答了。

下面是我的代码

<%= f.fields_for :role do |r| %>
  <%= r.fields_for :user do |u| %>
    <% i = 0 %>
    <%= u.fields_for :security_questions do |ff| %>
      <div class="group">
        <%= ff.select :key, options_for_select(sec_questions, selected: i), {}, { :class => 'half' } %>
        <%= ff.text_field :value, placeholder: "Answer #{i+1}", class: "half", "data-validate": '["empty"]' %>
        <div class="push"></div>
      </div><!--group-->
      <% i = i+1 %>
    <% end %>
  <% end %>
<% end %>

Answer 1

您可以将已使用的选项设置为禁用。

[options_for_select][1]可以设置一些disabled_options

options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], disabled: "Super Platinum")

# => <option value="Free">Free</option>
# => <option value="Basic">Basic</option>
# => <option value="Advanced">Advanced</option>
# => <option value="Super Platinum" disabled="disabled">Super Platinum</option>

Answer 2

您可以添加一些jquery来实现

例如

$(document).ready ->
  questionOpts = $(".questions select:first option")

  $(".questions select").change ->
    trigger = this

    $(".questions select").each ->
      select = this

      if select != trigger
        selectedValues = $(".questions select").map -> 
          if this != select
            this.value if this.value != ""

        opts = questionOpts.clone().map -> 
          if jQuery.inArray(this.value, selectedValues) == -1
            if this.value == select.value
              $(this).prop("selected", true)
            this

        $(select).empty()
        $(select).append(opts)


  $(".questions select").trigger("change")

<div class="questions">
  <select name="x">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <select name="y">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <select name="z">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

如何只允许用户选择一个问题

2 个答案: