如果使用 Haml 选择了单选按钮，如何隐藏元素

Question

我想知道如果选择了单选按钮，如何隐藏元素。

我有一个表单，如果选择了对应于account.kind == "person" 的单选按钮，我想同时显示first_name 和last_name 输入，否则它们应该被隐藏。

这里是Haml代码：

= simple_form_for(@account, html: { class: 'edit-form edit_account' }, wrapper: :edit_form) do |f|
  %fieldset.large-2-col
    %legend.hint
      %span= t('views.accounts.profile.description')
    .fields-block
      = f.input :kind, as: :radio_buttons, wrapper_class: 'fields-group contact-type', item_wrapper_class: 'inline', item_wrapper_tag: 'div', collection: Account.kind.options, required: true, wrapper: :inline_radio
      = f.input :first_name, autofocus: true, input_html: { data: { person: Account.human_attribute_name('first_name'), company: Account.human_attribute_name('company_name') } }

      = f.input :last_name

以及可能相关或不相关的相关 CoffeeScript：

$("form input[name='account[kind]']").bind 'change', () ->
    selected_value = $("input[name='account[kind]']:checked").val()
    $("label[for='account_first_name']").html $('#account_first_name').data(selected_value)
    $("#account_last_name").parents('.fields-group').toggleClass('hidden', selected_value != 'person')
    $("#account_last_name").val('') if selected_value == 'company'
    false

  $("input[name='account[kind]']").trigger 'change' if $("input[name='account[kind]']").length > 0

Answer 1

这与 Haml 没有任何关系，因为它只是在客户端中完成的。

// this create an idempotent handler that works with Turbolinks
$(document).on('change', "input[name='account[kind]']", function(e){
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
  // this avoids traversing the entire DOM when we know what the user has clicked anyways
  let input = $(this.form.elements["account[last_name]"]);
  let label = $(this.form.elements["account[first_name]"]).parents('.fields-group').find('label');
  input.parents('.fields-group').toggle(this.value === "person");
  // prevents input from being sent if the form is submitted
  input.prop('disabled', function(){ return e.target.value !== "person" });
  // transform label
  label.text(this.value === "person" ? "First name" : "Name");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="field">
     <input type="radio" id="person" name="account[kind]" value="person" checked>
     <label for="male">Person</label><br>
     <input type="radio" id="company" name="account[kind]" value="company">
     <label for="female">Company</label><br>
  </div>
  <div class="fields-group">
    <label for="account[first_name]" data-se>First name</label>
    <input type="text" name="account[first_name]">
  </div>
  <div class="fields-group">
    <label for="account[last_name]">Last name</label>
    <input type="text" name="account[last_name]">
  </div>
</form>

在 CoffeScript 中：

# this create an idempotent handler that works with Turbolinks
$(document).on 'change', 'input[name=\'account[kind]\']', (e) ->
  # https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
  # this avoids traversing the entire DOM when we know what the user has clicked anyways
  input = $(@form.elements['account[last_name]'])
  label = $(@form.elements['account[first_name]']).parents('.fields-group').find('label')
  input.parents('.fields-group').toggle @value == 'person'
  # prevents input from being sent if the form is submitted
  input.prop 'disabled', ->
    e.target.value != 'person'
  # transform label
  label.text if @value == 'person' then 'First name' else 'Name'

return

您可能需要稍微调整一下，因为我不知道您渲染的视图到底是什么样的，但它非常简单。