Question

Ok, I am working on an ASP.NET-MVC web app that has a page with several rows and columns of drop down lists. My intention is to enable/disable the DDLs in columns 2 and three, based on the selection of the DDL in column1.

So far, I am only able to enable/disable ALL of the DDLs on the entire page at the same time. I need to figure out how to make the event fire only as it relates to the DDLs on a specific row.

Here’s my code so far:

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>    

My Script:

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

Your help will be much appreciated. The IDs for each element are dynamically generated, so I need the code to be able to adapt to include new ID, as users will have the ability to add new rows. The ID increases by one number for each row, so it should be easy to match Column1/Row1 (i.e. “Condition_1”) and Column2/Row1 (i.e. “Quality_1”). Thanks for your input.

Answer 1

I can’t believe how simple this solution actually was. I think my lack of sleep caused me to overlook the obvious. Anyway, here’s the answer to my own question…hope it helps someone 🙂

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

I simply added a var that binds the action to the closest div containing the first DDL:

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

Then I added the var into my if else statements:

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

If anyone has a more efficient suggestion, I am open to feedback. Thanks.