haml中的文本框和复选框依赖

Text box and check box dependency in haml

我在 htaml.haml(ruby on rails)中有一个表单,其中包含一个复选框列表和两个文本框。这两个文本框依赖于两个复选框。如果一个复选框被点击,相应的文本框应该是可编辑的,否则它应该是不可编辑的。 我的表格看起来像这样

%script(src ="/app/assets/a.js")
%h1 Registration
%h2 User Information
.row
  .col-md-6.col-md-offset-3
     = form_for(@user) do |f|
       = f.label :cisco_email,'Cisco Email'
       = f.email_field :cisco_email
       = f.label :name, 'Current group'
       = f.text_field :current_group
       = f.label :name, 'Current work location,city'
       = f.text_field :work_city     
%h2 Area of Interests: check at least one box that apply, can select maximum of 2
.row
 .col-md-6.col-md-offset-3
   = form_for(@user) do |f|
     = f.check_box :conflict_resolution
     = f.label :conflict_resolution, 'Conflict Resolution'
     = f.check_box :customer_know_how
     = f.label :customer_know_how, 'Customer Know How'
     = f.check_box :exec_acheive_results
     = f.label :exec_acheive_results, 'Executive to achieve results'
     = f.check_box :personal_branding
     = f.label :personal_branding, 'Personal Branding'
     = f.check_box :leading_change 
     = f.label :leading_change, 'Leading Change'
     = f.check_box :align_and_influence    
     = f.label :align_and_influence, 'Align and Influence'
     = f.check_box :managing_without_authority
     = f.label :managing_without_authority, 'Managing Without Authority'
     = f.check_box :win_win_negotiation
     = f.label :win_win_negotiation, 'Win-Win Negotiation'
     = f.check_box :career_exploration
     = f.label :career_exploration, 'Career Exploration'
     = f.check_box :effective_communication
     = f.label :effective_communication, 'Effective Communication'
     = f.check_box :think_out_box
     = f.label :think_out_box, 'Creative Thinking/Think Out Of the box'
     = f.check_box :tech_know
     = f.label :tech_know, 'Technical Know-How, List Areas'
     = f.text_field :other
     = f.label :other, 'Any Other'
     = f.check_box :other_areas
     = f.text_field :tech_areas
     = f.submit "Register Me", class: "btn btn-primary"

我在 JavaScript 文件中执行此操作

$(document).on('click', '#user_tech_know', function (event) {
if (this.checked) {
$('#user_other').show();
} else {
$('#user_other').hide();
}
});

我对这一切都是陌生的。有人可以帮我吗?

这应该有效:

$(document).on('click', '#tech_know', function (event) {
  if (this.checked) {
    $('#other').show();
  } else {
    $('#other').hide();
  }
});

警告

使用 Firebug 或查看源代码来查看相关字段的实际 ID 并调整代码以匹配它们。因此,例如,如果您想要 show/hide 的 ID 是 'foo',请将上面的“#other”替换为“#foo”(对于 "this is an ID",# 是 jQuery) .