頁面表單:
<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);
}