页面表单:
<div>
@{
UserInfo userInfo = ViewBag.UserInfo as UserInfo;
List<UserAction> list = ViewBag.UserAction as List<UserAction>; //数据查询到内存中,提高性能
}
<input type="hidden" id="UserId" value="@userInfo.UserId"/>
<table border="1">
<thead>
<th>权限名称</th>
<th>设置</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ActionTitle</td>
<td>
<input type="radio" name="@item.ActionId"
@if (list.Where(ua=>(ua.ActionId==item.ActionId)&&(ua.IsAllow==true)).Count()>0)
{
@(" checked='checked'");
}
value="1"/>允许
<input type="radio" name="@item.ActionId"
@if (list.Where(ua=>(ua.ActionId==item.ActionId)&&(ua.IsAllow==false)).Count()>0)
{
@(" checked='checked'");
}
value="-1"/>拒绝
<input type="radio" name="@item.ActionId"
@if (list.Where(ua=>(ua.ActionId==item.ActionId)).Count()==0)
{
@(" checked='checked'");
}
value="0"/>取消
</td>
</tr>
}
</tbody>
</table>
</div>
页面预览:
如上图所示,
要使上图中的radio点击的同时触发点击事件,同时取消该点击对象的点击事件,又让另外两个兄弟节点对象注册点击事件
因为JS不支持事件多播委托,但是JQuery支持,所以在取消注册当前点击对象的Click事件的同时也要对其他两个兄弟节点radio取消Click事件后重新绑定。
请忽略与服务端交互的代码!
JS代码:
$(function(){
$(':radio').bind('Click',Click1);//给所有radio绑定单击事件
//$(':radio:not(:checked)').bind('Click',Click1);//仅给未选择的radio绑定单击事件,也能解决问题
});
function Click1(){
alert('1');
@*//收集数据
var uid = $('#userId').val();
var aid = $(this).attr('name');
var allow = $(this).val();
//发送异步请求
$.post('@Url.Action("SetAction","UserInfo1")',{
uid:uid,
aid:aid,
allow:allow
},function(msg){
if(msg!="ok"){
alert('分配否决失败,请稍后再试');
}
});*@
//处理绑定事件,防止用户点击多次已选中的单选按钮,从而进行多次请求。
$(this).unbind('click').siblings().unbind('click').bind('click',Click1);
}