【问题标题】:Disable checkboxes when another is checked选中另一个复选框时禁用复选框
【发布时间】:2019-03-13 14:00:57
【问题描述】:

我有一个 MVC Web 应用程序,在一个部分中,我管理用户的权限(例如决定用户可以查看/编辑/添加/删除哪些信息...)。

为了防止出现一些错误,如果选中 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);
                    }
                })
            }
        }
    });
});

【问题讨论】:

  • 附带说明,您不需要 == true,您可以执行 if($('#' + getchkid).is(':checked')){} 然后 for if你想要 false 它的 if(!$('#' + getchkid).is(':checked')){}。此外,如果第一个语句不正确,那么第二个语句必须为假,因此您无需添加声明是否为假的语句,只需说 else {}

标签: javascript jquery html asp.net-mvc


【解决方案1】:

因为你正在做一个一切都一样的循环,你可以这样做:

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

  }
});

【讨论】:

  • 很好,但对我来说不起作用可能是因为我在复选框上有另一个点击事件,此事件添加或删除用户的权限
  • 如果是这样,那么您只需将代码添加到该代码中即可,它应该可以工作
  • 我提供我的另一个点击事件,如果你想看看
  • 我在其中添加了包含您的代码的更新,看起来您正在使用数字作为 id,这就是我在 id 中添加数字的原因。
  • 是的,我使用数字,所以这样每个复选框都是唯一的,但我想在页面加载时取消选中它们,而不仅仅是在用户点击它们时?
猜你喜欢
  • 1970-01-01
  • 2011-08-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-13
  • 1970-01-01
相关资源
最近更新 更多