Question

我在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();
}
});

我是这一切的新手。有人能帮帮我吗？

Answer 1

这应该有效：

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

<强>买者

使用Firebug或查看来源查看相关字段的实际ID，并调整代码以匹配它们。因此，例如，如果您要显示/隐藏的ID为'foo'，请将上面的'#other'替换为'#foo'（＃is is jQuery for“this is a ID”）。

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

1 个答案: