如何在jquery中禁用gridview内的复选框？

Question

您好，我正在 jquery 的帮助下开发一个 asp.net 应用程序。我的应用程序中有一个gridview。它有每一行的复选框。连同复选框，我将一些值绑定到隐藏字段。 这是我的 gridview 代码。

<asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" />
                <asp:HiddenField ID="Hidden" runat="server" Value='<%#Eval("Name")%>' />
            </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />

以上代码呈现输出如示例

           Name
   chkbox  Andy
   chkbox  Marry
   chkbox  Daniel

我也将相同的名称（在 Boundfield 中使用）绑定到 hiddenfield。我有一个带有多选功能的下拉菜单。每当我从下拉列表中选择 Andy 时，我想禁用 gridview 中的 Andy 复选框。我正在尝试如下。我在第一个数组中获取下拉选择值，在第二个数组中获取所有隐藏值字段。我正在将公共元素推送到第三个数组。 这是我的代码。

 var result = new Array();
            for (var i = 0; i < ResultArrayFirst.length; i++) {
                if (selected.indexOf(ResultArrayFirst[i]) >= 0) {
                    result.push(ResultArrayFirst[i]);
                }
            }

例如，结果数组将包含诸如 Andy,Marry 之类的值。在这种情况下，我想禁用留给安迪和玛丽的网格复选框。我尽力了我的水平，但无法修复它。任何帮助，将不胜感激。非常感谢。

我尝试如下。

for (var k = 0; k < result.length; k++)
            {
                $('#<%= GridView1.ClientID %> input[type="hidden"]').each(function () {

                    if($(this).val()==result[k])
                    {

                       //Not sure how to hide disable checkbox GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = true;
                    }
                });
                break;
            }

这仍然无法正常工作。在这方面需要任何帮助

Answer 1

为了清楚起见，我将删除您的大部分示例。一旦你看到发生了什么，你就可以放回你需要的东西。

首先，大局：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
  <Columns>
    <asp:TemplateField HeaderText="user_name" SortExpression="user_name">
      <ItemTemplate>
        <input id="CheckBox1" runat="server" type="checkbox" 
           class="cbName" cbid='<%# Eval("user_id") %>' />

        <label id="Label1" runat="server" for="CheckBox1" >
           <asp:Literal ID="Literal1" runat="server" Text='<%# Bind("user_name") %>'></asp:Literal>
        </label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

<asp:ListBox ID="ListBox1" runat="server" 
    ClientIDMode="Static" SelectionMode="Multiple" Rows="10"
    DataSourceID="SqlDataSource1" 
    DataTextField="user_name" DataValueField="user_id" >
</asp:ListBox>

<script type="text/javascript">
  $(function () {
    $("#ListBox1").on("change", function () {
      $("#ListBox1 option").each(function (i,e) {
        var s = "input.cbName[cbid='" + $(this).val() + "']";
        $(s).prop("disabled", e.selected);
      });
    });
  });
</script>

发生了什么：

jquery 正在监视 ListBox 的选择更改。

每次选择列表项时，我都会循环遍历列表项的 entore 集并构建一个看起来像这样的 jquery 选择器。

input.cbName[cbid=XXX] 其中 XXX 是某个索引值

1. cbName 是 Gridview 独有的
   
2. cbid 对 GridView 上的每个名称都是唯一的，并与 ListItem value 属性配对

这将在 gridview 中与其关联列表项配对的每个项目上查找并执行操作。这样做是为了避免由于 ASP 服务器控件附带的名称修改而导致与查找 gridview 项相关的问题。

以下 sn-p 显示了一个使用工作 jquery 呈现的示例 GridView 和 Listbox

$(function() {
  $("#ListBox1 option").on("click", function() {

    $("#ListBox1 option").each(function(i, e) {
      var s = "input.cbName[cbid='" + $(this).val() + "']";
      $(s).prop("disabled", e.selected);
    });
  });

});

#gv,#lb {
  display: inline-block;
  width:200px;
  vertical-align: top;
}

input.cbName[disabled],
input.cbName[disabled] + label{
  cursor:not-allowed;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gv">
  <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
      <tbody>
        <tr>
          <th scope="col">user_name</th>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl02$CheckBox1" type="checkbox" id="GridView1_CheckBox1_0" class="cbName" cbid="3032">
            <label id="GridView1_cblbl_0" for="CheckBox1">ALEXIS</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl03$CheckBox1" type="checkbox" id="GridView1_CheckBox1_1" class="cbName" cbid="1995">
            <label id="GridView1_cblbl_1" for="CheckBox1">ALI</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl04$CheckBox1" type="checkbox" id="GridView1_CheckBox1_2" class="cbName" cbid="2311">
            <label id="GridView1_cblbl_2" for="CheckBox1">ALMAZAR</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl05$CheckBox1" type="checkbox" id="GridView1_CheckBox1_3" class="cbName" cbid="1884">
            <label id="GridView1_cblbl_3" for="CheckBox1">ALTSHULER</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl06$CheckBox1" type="checkbox" id="GridView1_CheckBox1_4" class="cbName" cbid="3267">
            <label id="GridView1_cblbl_4" for="CheckBox1">ALTSHULER</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl07$CheckBox1" type="checkbox" id="GridView1_CheckBox1_5" class="cbName" cbid="1742">
            <label id="GridView1_cblbl_5" for="CheckBox1">ANTHONY</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl08$CheckBox1" type="checkbox" id="GridView1_CheckBox1_6" class="cbName" cbid="1697">
            <label id="GridView1_cblbl_6" for="CheckBox1">ANTHONY</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl09$CheckBox1" type="checkbox" id="GridView1_CheckBox1_7" class="cbName" cbid="2003">
            <label id="GridView1_cblbl_7" for="CheckBox1">BAEZ</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl10$CheckBox1" type="checkbox" id="GridView1_CheckBox1_8" class="cbName" cbid="2569">
            <label id="GridView1_cblbl_8" for="CheckBox1">BALDWIN</label>
          </td>
        </tr>
        <tr>
          <td>
            <input name="GridView1$ctl11$CheckBox1" type="checkbox" id="GridView1_CheckBox1_9" class="cbName" cbid="1863">
            <label id="GridView1_cblbl_9" for="CheckBox1">BRENNAN</label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div id="lb">
  <select size="10" name="ListBox1" multiple="multiple" id="ListBox1">
    <option value="3032">ALEXIS</option>
    <option value="1995">ALI</option>
    <option value="2311">ALMAZAR</option>
    <option value="1884">ALTSHULER</option>
    <option value="3267">ALTSHULER</option>
    <option value="1742">ANTHONY</option>
    <option value="1697">ANTHONY</option>
    <option value="2003">BAEZ</option>
    <option value="2569">BALDWIN</option>
    <option value="1863">BRENNAN</option>

  </select>
</div>