옵션을 선택하면 요소를 전환하는 방법은 무엇입니까?

Question

select에서 선택한 옵션에 따라 체크 박스를 토글하고 싶습니다. 여기 insertUser 템플릿 안에 내 선택이다 :

<div class="form-group"> 
    <label for="userType">User Type:</label> 
    <select class="form-control" id="userType"> 
     <option value="admin">Admin</option> 
     <option value="user">Normal User</option> 
    </select> 
</div> 

그리고 나는 다음과 같은 확인란이 있습니다

<div class="checkbox"> 
    <label><input type="checkbox" value="rm">Remove Users</label> 
</div> 

내가 관리자가 선택기에서 선택하면 체크 박스를 볼 때 일반 사용자를 숨기려면 가 선택되었습니다. 어떻게해야합니까?

Answer 1

유성 방법 :

1. 랩 내부에있는 확인란 블록
2. 이 세션 VAR을 설정하는 경우에 따라 쓰러지 다.
3. 사용자가 admin 인 경우 확인란을 표시하십시오.

---

템플릿 :

<template name="wow"> 
    <div class="form-group"> 
     <label for="userType">User Type:</label> 
     <select class="form-control" id="userType"> 
      <option value="admin">Admin</option> 
      <option value="user">Normal User</option> 
     </select> 

<!-- here is the if block --> 

{{#if isAdmin}}   
<div class="checkbox"> 
    <label><input type="checkbox" value="rm">Remove Users</label> 
</div> 
{{/if}} 

<!-- if block ends --> 

    </div> 
    </template> 

도우미 : 당신이 당신의 JS를 게시하는 것을 잊었다처럼

Template.wow.helpers({ 
    // returns only when isAdmin is true. 
    isAdmin: function(){ 
     return Session.get("isAdmin"); 
    } 
}); 


Template.wow.events({ 
    // check for the change in value of the dropdown. If admin is chosen, set the isAdmin session variable. 

    'change #userType'(event){ 
     if(event.target.value == 'Admin'){ 
      Session.set('isAdmin', true); 
     } 
    } 
}); 

//For the sense of completeness, unset the used session variable when the template gets destroyed. 

Template.wow.onDestroyed(function(){ 
    Session.set("isAdmin", undefined); 
}); 

Answer 2

당신은 hide() 및 show()이 방법을 사용할 수 있습니다

$(document).ready(function() { 
    $('#userType').on('change', function() { 
     if ($(this).val() == 'admin') { 
      $('.checkbox').show(); 
     } else { 
      $('.checkbox').hide(); 
     } 
    }); 
}); 

FIDDLE