根据在网格视图内的另一个下拉列表上选择的值禁用网格视图内的下拉列表

Question

我在gridview 中有两个下拉列表，即ddonsiteoffsite 和ddhours。现在我想要的是，如果 ddonsiteoffsite 的选定文本是“现场”，则应该禁用 ddhours。我尝试了以下代码 sn-p，但它没有禁用 ddhours。

<asp:TemplateColumn HeaderText="      OnSite/OffSite" >   
                <ItemTemplate>   
                     <asp:DropDownList ID="ddOnsiteOffside" runat="server" onchange="ToggleOnOff(this)"><asp:ListItem Text = "Offsite" Value="Offsite"></asp:ListItem>        
                        <asp:ListItem Text = "Onsite" Value="Onsite"></asp:ListItem> 
                      </asp:DropDownList>   
                </ItemTemplate>   
            </asp:TemplateColumn>   
             <asp:TemplateColumn>   
                <ItemTemplate>   
                    <asp:DropDownList ID="ddhours" runat="server">   
                        <asp:ListItem Text = "1" Value="1" ></asp:ListItem>   
                        <asp:ListItem Text = "2" Value="2" ></asp:ListItem>   
                        <asp:ListItem Text = "3" Value="3" ></asp:ListItem>   
                        <asp:ListItem Text = "4" Value="4" ></asp:ListItem>   
                        <asp:ListItem Text = "5" Value="5" ></asp:ListItem>   
                        <asp:ListItem Text = "6" Value="6" ></asp:ListItem>   
                        <asp:ListItem Text = "7" Value="7" ></asp:ListItem>   
                        <asp:ListItem Text = "8" Value="8" ></asp:ListItem>   
                        <asp:ListItem Text = "9" Value="9" ></asp:ListItem>   
                    </asp:DropDownList>   
                </ItemTemplate>   
            </asp:TemplateColumn>

而我使用的相应JavaScript是：

function ToggleOnOff(ddonoff)    
  {      

     var row = chk.parentNode.parentNode;              
     if(ddonoff.value=="Onsite")    
     {           
          row.getElementsByTagName("ddhours")[0].disabled = true;                   
     }   
     else   
          row.getElementsByTagName("ddhours")[0].disabled = false;                    
 } 

如何使用 JavaScript 或 jQuery 实现这一点？我不明白我哪里出错了。

Answer 1

如果您有多个具有相同 id 的元素，那么它将是一个无效的 HTML 文档。删除 id 并为其命名。

类似的东西

$("select[name='ddOnsiteOffsideName']").change(function(){
    var parent = $(this).closest("tr");
    var hoursSelectBox = parent.find("select[name='hoursName']");
    if (hoursSelectBox.val() === "Onsite") {
        hoursSelectBox.attr("disabled", true);
    }
});

在您的代码中，您使用的是row.getElementsByTagName("ddhours")。这将获取标签名称为“ddhours”的所有元素，在这种情况下是不正确的。

Answer 2

就这样做吧。

function ToggleOnOff(ddonoff) {
    $(ddonoff)
        .parent()// parent of ddl is td
        .next()// gives the next td 
        .find('select')// finds a select element in that td
        .attr('disabled', (ddonoff.value == "Onsite") ? 'disabled' : '');//enable-disable
} 

或

function ToggleOnOff(ddonoff) {
    $(ddonoff)
        .parent()//td
        .parent()//tr
        .find('select[id*="ddhours"]')//select by id
        .attr('disabled', (ddonoff.value == "Onsite") ? 'disabled' : '');//disable-enable
}

即使两列不相邻，方法 2 也有效。

依赖：jQuery