0

好的，我正在开发一个 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”）。感谢您的输入。

4

1 回答 1

0

我无法相信这个解决方案实际上是多么简单。我认为我的睡眠不足导致我忽略了显而易见的事情。无论如何，这是我自己问题的答案......希望它可以帮助某人:)

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

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

于 2012-07-11T22:44:55.763 回答