在同一行上查找div的JQuery選擇器？

Question

好的，我正在研究一個ASP.NET-MVC Web應用程序，該應用程序具有包含多行和多列下拉列表的頁面。我的意圖是根據列1中DDL的選擇啓用/禁用第2列和第3列中的DDL。

到目前爲止，我只能同時啓用/禁用整個頁面上的所有DDL。我需要弄清楚如何讓事件觸發，因爲它與特定行上的DDL相關。

這裏是我到目前爲止的代碼：

HTML -

<select class="med" id="SubTrades_1__Condition" name="SubTrades[1].Condition"><option  value="">- Select -</option> 
<option value="N/A">N/A</option> 
<option value="Missing">Missing</option> 
<option value="New">New</option> 
<option value="Excellent">Excellent</option> 
<option value="Good">Good</option> 
<option value="Fair">Fair</option> 
<option value="Poor">Poor</option> 
<option value="Very Poor">Very Poor</option> 
</select> 

<select class="med" id="SubTrades_1__Quality" name="SubTrades[1].Quality" disabled="disabled"><option value="">- Select -</option> 
<option value="Designer">Designer</option> 
<option value="Custom">Custom</option> 
<option value="Semi-Custom">Semi-Custom</option> 
<option value="Builder">Builder</option> 
<option value="Basic">Basic</option> 
<option value="Economy">Economy</option> 
</select> 

<select class="med" id="SubTrades_1__Age" name="SubTrades[1].Age" disabled="disabled">  <option value="">- Select -</option> 
<option value="Original to home">Original to home</option> 
<option value="Brand New/Recent Upgrade">Brand New/Recent Upgrade</option> 
<option value="1 to 3 Years">1 to 3 Years</option> 
<option value="4 to 6 Years">4 to 6 Years</option> 
<option value="7 to 10 Years">7 to 10 Years</option> 
<option value="11 to 15 Years">11 to 15 Years</option> 
<option value="16 to 20 Years">16 to 20 Years</option> 
<option value="21 to 30 Years">21 to 30 Years</option> 
<option value="31 to 40 Years">31 to 40 Years</option> 
<option value="41 to 50 Years">41 to 50 Years</option> 
<option value="Over 50 Years">Over 50 Years</option> 
</select>  

我的腳本：

$("[name][name$='Quality']").prop("disabled", true); 

$("[name][name$='Age']").prop("disabled", true); 

$("[name][name$='Condition']").change(function() { 

if ($(this).val() == "" || $(this).val() == "N/A" || $(this).val() == "Missing") { 

    $("[name][name$='Quality']").attr('disabled', 'disabled'); 
    $("[name][name$='Age']").attr('disabled', 'disabled'); 
} 

else { 
    $("[name][name$='Quality']").removeAttr('disabled'); 
    $("[name][name$='Age']").removeAttr('disabled'); 
} 
}); 

您的幫助將非常感激。每個元素的ID都是動態生成的，所以我需要代碼能夠適應新的ID，因爲用戶可以添加新行。 ID對於每行增加一個數字，因此應該很容易匹配Column1/Row1（即「Condition_1」）和Column2/Row1（即「Quality_1」）。感謝您的輸入。

Answer 1

我不敢相信這個解決方案實際上有多簡單。我覺得我的睡眠不足導致我忽略了這個明顯的問題。總之，這裏的答案我自己的問題...希望它可以幫助別人:)

$("[name][name $='Quality']").prop("disabled", true); 

$("[name][name $='Age']").prop("disabled", true); 

$("[name][name$='Condition']").change(function() { 

var parentDDL = $(this).closest('div'); 

if ($(this).val() == "" || $(this).val() == "N/A" || $(this).val() == "Missing") { 

    $("[name][name$='Quality']", $(parentDDL)).attr('disabled', 'disabled'); 
    $("[name][name$='Age']", $(parentDDL)).attr('disabled', 'disabled'); 
} 

else { 
    $("[name][name$='Quality']", $(parentDDL)).removeAttr('disabled'); 
    $("[name][name$='Age']", $(parentDDL)).removeAttr('disabled'); 
} 
}); 

我簡單補充，結合動作包含第一DDL最接近DIV一個變種：

var parentDDL = $(this).closest('div'); 

然後我將var添加到我的if else語句中：

$("[name][name$='Quality']", $(parentDDL)).attr('disabled', 'disabled'); 

如果有人有更有效的建議，我樂意提供反饋意見。謝謝。