2015-06-16 64 views
0

我在htaml.haml(ruby on rails)中有一個表單,它由一系列複選框和兩個文本框組成。這兩個文本框依賴於兩個複選框。如果單擊一個複選框,相應的文本框應該是可編輯的,否則它應該是不可編輯的。 我的形式看起來這haml中的文本框和複選框依賴關係

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

我是新來的這一切。有人能幫助我嗎?

回答

0

這應該工作:

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

買者

使用螢火蟲或查看源代碼,看看有問題的字段的實際ID和調整代碼以配合他們。因此,例如,如果您要顯示/隱藏的ID是'foo',請將'#other'替換爲'#foo'(#是jQuery代表「這是一個ID」)。

+0

它的工作,但不是第一次。我的意思是當我檢查並取消check_box時,它開始工作。 – Novice

+0

嗯不知道。你在哪裏加載頁面上的JS?我喜歡將我的JS放在頁面佈局的底部,以確保在嘗試將事件附加到它之前,所有HTML都已加載。否則,您是否可以使用更新的代碼更新您的OP,以便我們都可以看看? –

+0

我添加了我的完整代碼new.html.haml和javasript代碼。 – Novice