announcement-test/app/views/admin/announcements/settings.html.erb

<style type="text/css">
	#notification{
		background-color: #ececec;
	    font-size: 14px;
	    left: 40%;
	    padding: 10px;
	    position: absolute;
	    text-align: center;
	    top: 40px;
	    width: auto;
	    z-index: 1200;
	    display: none;
	}
	.badge-info{
		margin-left: 10px;
	}
	#approver-list{
		list-style: none;
		margin-left: 5px;
	}
	#approver-list li {
		border-bottom: 1px solid #efefef;
	    margin-bottom: 10px;
	    padding-bottom: 10px;
	}
	#approver-list .approver-avatar{
		width: 60px;
		height: 60px;
		border-radius: 50px;
		margin-right: 20px;
	}
	#approver-list .approver-check{
		vertical-align: middle;
		margin-top: 25px;
	}
	#approver-list .approver-check input{
		margin-right: 5px;
		vertical-align: middle;
	}
	#approver-list .approver-check label{
		display: inline;
    	vertical-align: middle;
	}
	#approver-list .approver-title{
		font-size: 14px;
	}

</style>
<% sub_managers = @module_app.sub_managers %>
<div id="notification">Click on Submit to save the changes.</div>
<%= form_for @setting, url: (@setting.new_record? ? admin_announcement_createsettings_path : admin_announcement_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %> 
<div class="input-area">
 <div class="control-group">
    <%= f.label :top_limit, :class => "control-label muted" %>
    <div class="controls">
        <%= f.number_field :top_limit, :min => "0" %>
        <span class="help-block">Put 0 for unlimited.</span>
    </div>
  </div>
  	<% if !sub_managers.blank? %>
	  <div class="control-group">
	    <%= f.label "Approver Setting", :class => "control-label muted" %>
	    <div class="controls">
	       <a href="#approverModal" role="button" class="btn" data-toggle="modal">Approvers List</a>
	      <span class="badge badge-info"><%= @setting.approvers.count %></span>
	    </div>
	  </div>
	<% else %>
		<div class="control-group">
		 <a href="/admin/authorizations/announcement">Click here to set Sub Managers for this module</a>
		</div>
	<% end %>
	<div class="control-group">
	    <%= f.label "Send emails to", :class => "control-label muted" %>
	    <div class="controls">
	        <input type="checkbox" name="announcement_setting[email_to][]" value="admins" <%= @setting.email_to.include?("admins") ? "checked=checked" : "" %>> Admins
	        <input type="checkbox" name="announcement_setting[email_to][]" value="managers" <%= @setting.email_to.include?("managers") ? "checked=checked" : "" %>> Managers
	        <input type="checkbox" name="announcement_setting[email_to][]" value="approvers" <%= @setting.email_to.include?("approvers") ? "checked=checked" : "" %>> Approvers
	    </div>
  	</div>
</div>
<div class="hidden-approver-list">
	<% sub_managers.each do |sm| %>
		<% if @setting.approvers.include?(sm.id.to_s) %>
			<input type="hidden" id="check_<%= sm.id.to_s %>" value="<%= sm.id.to_s %>" name="announcement_setting[approvers][]">
		<% end %>
	<% end %>
</div>
<div class="form-actions">
  <%= f.submit t('submit'), class: 'btn btn-primary' %>
</div>
<% end %>

<div id="approverModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="approverModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="approverModalLabel">Sub Managers</h3>
  </div>
  <div class="modal-body">
  	<ul id="approver-list">
		<% sub_managers.each do |sm| %>
			<li>
				<%= image_tag sm.member_profile.avatar.thumb, :class => "approver-avatar" %>
				<span class="approver-title"><%= sm.name %></span>
				<span class="pull-right approver-check">
					<input id="checkbox_<%= sm.id %>" type="checkbox" value="<%= sm.id %>" <%= @setting.approvers.include?(sm.id.to_s) ? "checked=checked" : "" %>> 
					<label for="checkbox_<%= sm.id %>">Approver</label>
				</span>
			</li>
		<% end %>
	</ul>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Ok</button>
  </div>
</div>
<script type="text/javascript">
	var approverList = $(".hidden-approver-list");
	$(".approver-check input").on("click",function(){
		var el = $(this);
		if(el.is(":checked")){
			var t = $("<input type='hidden'>");
			t.val(el.val());
			t.attr("name", "announcement_setting[approvers][]");
			t.attr("id", "check_" + el.val());
			approverList.append(t);
		}else{
			approverList.find("#check_" + el.val()).remove();
		}
	})
	$("#approverModal").on("hidden",function(){
		$("#notification").slideDown();
		$(".badge-info").text($(".hidden-approver-list input").length);
	})

</script>