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

Question

我不熟悉haml，想知道如果选择了单选按钮则如何隐藏元素。我有一种情况，如果选择了与first_name相对应的单选按钮，我想同时显示last_name和account.kind == "person"输入，否则应将其隐藏。

这里是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

以及可能或可能不相关的相关咖啡脚本：

$("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

// 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 = $(e.target.form.elements["account[last_name]"]);
  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" });
});

<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]">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>

使用文字：

# 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 = $(e.target.form.elements['account[last_name]'])
  input.parents('.fields-group').toggle @value == 'person'
  # prevents input from being sent if the form is submitted
  input.prop 'disabled', ->
    e.target.value != 'person'
  return

# ---
# generated by js2coffee 2.2.0