时间戳

首页 > 解决方案 > jQuery：在模式上构建一个表单，其中角色字段为选择，用户字段为其他。如果在其他选择上选择了角色，则必须禁用角色

javascript - jQuery：在模式上构建一个表单，其中角色字段为选择，用户字段为其他。如果在其他选择上选择了角色，则必须禁用角色

问题描述

编写一个更新用户角色的动态表单。有2个角色leader（可授予1人）和成员用户，一个团队由4名成员（包括leader）组成。通过形式，他们选择谁成为领导者并作为成员休息。因此，在我通过 jQuery 绑定的表单中，使用选择下拉列表来选择具有 2 个选项领导者和成员的角色。如果在任何选择的领导者中被选中，我应该如何禁用。我可以在后端站点限制此验证，但我也希望这件事可以在前端完成，它会更好。

以下是片段：

function updateRole(){
  $('#update-table-body').empty();
    let body='';
   for(var i=0;i<members.length;i++)
                {     
                  body+='<tr>'; 
                  body+='<th><input type="hidden" name="member'+i+'" value="'+members[i].id+'"/>'+members[i].name+'</th>';
                  body+='<td><div class="control"><div class="select">\
                    <select id="role_'+i+'" name="role'+i+'" onchange="dissRole()">\
                      <option hidden></option>\
                      <option value="1">Leader</option>\
                      <option value="2">Member</option>\
                    </select></div></div></td>';    
                  body+='</tr>';
                }
        body+='<input type="hidden" id="count" name="count" value="'+members.length+'"/>';
  $('#update-table-body').append(body);
  $('.modal').addClass('is-active');
 }

和

function dissRole(){
    $(this)
        .siblings('select')
        .children('option[value="1"]')
        .prop('disabled', true)
        .siblings().removeAttr('disabled');
}

编辑1：普通HTML模板中还有其他选择。

标签： javascriptjquery

解决方案

更改dissRole()功能并在这里选择一个类似的 id 是有效的答案

function dissRole(){
     // List of ids that are selected in all select elements
        var selected = new Array();

        // Get a list of the ids that are selected
        $('select[id^="role_"] option:selected').each(function()
        {
            selected.push($(this).val());

        });

        // Walk through every select option and enable if not
        // in the list and not already selected
        $('select[id^="role_"] option').each(function()
        {
            if (!$(this).is(':selected') && $(this).val() != '' && $(this).val() != '2')
            {
                var shouldDisable = false;
                for (var i = 0; i < selected.length; i++)
                {
                  //alert(selected.length);
                    if (selected[i] == $(this).val())
                        shouldDisable = true;
                }


                $(this).removeAttr('disabled', 'disabled');
                if (shouldDisable)
                {
                    $(this).attr('disabled', 'disabled');
                }
            }
        });
}

推荐阅读