Disable checkboxes when another is checked
Question
I have a MVC web app, in one section i manage the permission for users (such as decide which information the user can see/edit/add/delete ecc...).
For prevent some errors, if the checkbox in the column Admin is checked the others in the row will be disabled, because the group Admin can do everything, same thing with the Manager column, but in this case only the checkboxes on his right will be disabled.
Afeter many researches, i didn't find anything which can be useful for my case
This is my View code:
<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>
This is the table:
Any suggestion is appreciate.
Leo.
EDIT
I have this click event on checkboxes for managing user's permissions
$(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);
}
})
}
}
});
});
1 answers
solution1
0 ACCPTED 2019-03-13 14:11:59
Since you're doing a loop where everything is the same, you could do something like this:
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
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.