选择选项时如何切换元素？

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

您可以使用hide()和show()方法

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

FIDDLE

Answer 2

流星之路：

将复选框包裹在 if 块中
根据下拉菜单设置会话变量。
如果用户是管理员，显示复选框。

模板：

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

帮手：

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

选择选项时如何切换元素？

How do toggle elements when option is selected?

jquery

meteor