选中另一个时禁用复选框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选中另一个时禁用复选框相关的知识,希望对你有一定的参考价值。
我有一个MVC网络应用程序,在一个部分我管理用户的权限(例如决定用户可以看到/编辑/添加/删除ecc的信息......)。
为了防止出现一些错误,如果选中Admin列中的复选框,则该行中的其他人将被禁用,因为组Admin可以执行所有操作,与Manager列相同,但在这种情况下,只有右侧的复选框将是禁用。
经过多次研究,我找不到任何对我的案例有用的东西
这是我的查看代码:
<body>
<div class="limiter">
<br />
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<table id="tablePermission">
@{
CEG_dev_labelsEntities db = new
CEG_dev_labelsEntities();
int countY = 1;
//get all groups
var groups = from g in db.Groups
orderby g.group_name
select new
{
g.group_name,
g.group_description
};
<thead>
<tr class="table100-head">
<th class="column1">Username</th>
@foreach (var item in groups)
{
<td><button>@item.group_name</button</td>
}
</tr>
</thead>
foreach (var item in db.Users)
{
<tbody id="myTable">
@{
//get all user's group
var group_list = from g in db.Groups
join ug in
db.UserGroups on g.id_group equals ug.id_group
join u in db.Users on
ug.id_user equals u.id_user
where u.username ==
item.username
select new
{
g.group_name
};
//save the single values in a list
//so all information are more accesible
List<string> group_user_list = new
List<string>();
foreach (var item_ug in group_list)
{
group_user_list.Add(item_ug.group_name);
}
<tr style="cursor:default">
<tdclass="column1">
@html.DisplayFor(model =item.username)
</td>
@foreach (var itemG in groups)
{
//check the corresponding
//checkbox if user is a member
//of a specific group
if(group_user_list.Contains(itemG.group_name))
{
<td style="padding-left:80px"><input
type="checkbox" checked="checked"
class="chkclass" username="@item.username"
groupname="@itemG.group_name" id="@countY" /></td>
}
else
{
<td><input type="checkbox" class="chkclass"
username="@item.username"
groupname="@itemG.group_name"
id="@countY" />
</td>
}
countY++;
}
</tr>
}
</tbody>
}
}
</table>
</div>
</div>
</div>
</div>
</body>
这是表:
任何建议都表示赞赏。
狮子座。
编辑
我在复选框上有点击事件来管理用户的权限
$(document).ready(function () {
$('.chkclass').click(function () {
var getchkid = $(this).attr('id');
var isChecked = $('#' + getchkid).is(':checked');
if ($('#' + getchkid).is(':checked') == true) {
// to be send to your call
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
//here put your call ajax to your action
$.ajax({
type: 'Post',
url: '/UserGroups/AddPermission',
dataType: 'json',
data: {
'usr': username,
'grp': groupname
},
success: function (result) {
$('#' + getchkid).prop('checked', true);
},
error: function (jqxhr, status, exception) {
alert('Exception:', exception);
}
})
}
else {
if ($('#' + getchkid).is(':checked') == false) {
// to be send to your call
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
//here put your call ajax to your action
$.ajax({
type: 'Post',
url: '/UserGroups/DeletePermission',
dataType: 'json',
data: {
'usr': username,
'grp': groupname
},
success: function (result) {
if (result.error == true) {
alert('Error, must be there at least one
admin');
$('#' + getchkid).prop('checked', true);
}
else {
$('#' + getchkid).prop('checked', false);
}
},
error: function (jqxhr, status, exception) {
alert('Exception:', exception);
}
})
}
}
});
});
答案
既然你正在做一切都相同的循环,你可以这样做:
https://jsfiddle.net/z2mf8314/1/
$('.chkclass').click(function () {
var getchkid = $(this).attr('id');
var isChecked = $('#' + getchkid).is(':checked');
var username = $(this).attr('username');
var groupname = $(this).attr('groupname');
(getchkid == "1" && isChecked) ? $(this).closest('tr').find('input').not('#1').prop({'disabled': true, 'checked': false }) : $(this).closest('tr').find('input').prop('disabled', false);
if (isChecked) {
// to be send to your call
//here put your call ajax to your action
}
else {
// to be send to your call
//here put your call ajax to your action
}
});
以上是关于选中另一个时禁用复选框的主要内容,如果未能解决你的问题,请参考以下文章