グリッドビュー内の別のドロップダウンリストで選択された値に基づいて、グリッドビュー内のドロップダウンリストを無効にする

Question

グリッドビュー内に2つのドロップダウンリスト、つまりddonsiteoffsiteとddhoursがあります。今私が望むのは、ddonsiteoffsiteのselectedtextが "オンサイト"で、ddhoursを無効にする必要がある場合です。次のコードスニペットを試しましたが、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

これだけです。

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 
} 

OR

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

方法2は、2つの列が互いに隣接していなくても動作します。

依存関係：jQuery

Answer 2

同じIDを持つ要素が複数ある場合は、無効なHTMLドキュメントになります。 idsを削除し、名前を付けます。あなたがrow.getElementsByTagName("ddhours")を使用しているあなたのコードでは、この

$("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); 
    } 
}); 

よう

何か。この場合、正しくないタグ名 `ddhours 'を持つすべての要素を取得します。