Enabling a dropdown based on the value of other dropdowns on the same row

Question

I have a jsFiddle Demo of what I am trying to do. Basically I have a table with 2 rows and 4 cells. Each cell contains a drop down. In order for the last drop down in each row to be enabled, all the other drop downs must be selected and set to "yes". Here is my HTML:

<table id="tblCorporate">
    <tr>
        <td>
            <select id="dropDown1">
                <option selected="selected" value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown2">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown3">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown4">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select id="dropDown5">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown6">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown7">
                <option selected="selected" value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </td>
        <td>
            <select id="dropDown8">
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
        </td>
    </tr>
</table>

and here is my jQuery:

function disableDropDown(e)
{
    e.prop("disabled", true);
}

function enableDropDown(e)
{
    e.prop("disabled", false);
}

function refreshDropDowns()
{
    $('#tblCorporate').find('tr').each(function (i,el) {
        var i = 0;
        $(this).find('select').each (function (i1,el1) {
            if (i == 3)
            {
                if ($(this).prev().prev().val() == 'Yes' &&
                    $(this).prev().prev().prev().prev().val() == 'Yes' &&
                    $(this).prev().prev().prev().prev().prev().prev().val() == 'Yes') {
                    enableDropDown($(this));
                } else {
                    disableDropDown($(this));
                }
            }
            i++;
        });
    });
}

$(function() {
    $('#tblCorporate').find('select').each(function (i, el) {
        enableDropDown($(this));   
        $(this).change(function() {
            refreshDropDowns();
        });
    });
    refreshDropDowns();    
});

What I am doing is kinda hacky (and not working anyway) and I'm trying to find a better way to do it. Any help would be appreciated

Answer 1

$(function(){
    $('tr').each(function(index){
        $(this).find('select:last').prop('disabled', true);
    });

    $('select').change(function(){
        $('tr').each(function(index){
            refreshDropdowns($(this));
        });
    });

    function refreshDropdowns(tr){        
        var trSelectCount = $(tr).find('select').length;
        var disabled = false;        
        $(tr).find('select').each(function(index){

            if(index + 1 < trSelectCount) {
                if($(this).val() == "No")
                    disabled = true;
            }
        });
        $(tr).find('select:last').prop('disabled', disabled);
    }    
});

JSFiddle:

http://jsfiddle.net/Lugmu/1/

Answer 2

Why don't you simply use one function that you call every time information in your form change?

Here's a jsFiddle

Here's my jQuery:

$('#dropDown4').prop('disabled', true);

function refresh(){
    if($('#dropDown1').val() == 'Yes' && $('#dropDown2').val() == 'Yes' && $('#dropDown3').val() == 'Yes'){
        $('#dropDown4').prop('disabled', false);
    } else {
        $('#dropDown4').prop('disabled', true);
    }
}

$('form').change(function(){
    refresh();
});