Question

好的，我正在开发一个ASP.NET-MVC Web应用程序，该应用程序的页面包含多行和多列下拉列表。我的目的是根据column1中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');
}
});

我只是添加了一个var，它将动作绑定到包含第一个DDL的最近的div：

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

然后我将var添加到我的if else语句中：

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

如果有人提出更有效的建议，我愿意接受反馈。感谢。

在同一行查找div的JQuery选择器？

1 个答案: