Question

我有jsFiddle Demo我要做的事情。基本上我有一个2行和4个单元格的表。每个单元格包含一个下拉列表。为了启用每行中的最后一个下拉列表，必须选择所有其他下拉列表并将其设置为“是”。这是我的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>

这是我的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();    
});

我正在做的是有点hacky（并且无论如何都没有工作），我正在努力找到一个更好的方法来做到这一点。任何帮助将不胜感激

Answer 1

为什么不简单地使用每次表单中的信息更改时调用的函数？

Here's a jsFiddle

这是我的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();
});

Answer 2

$(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/

根据同一行上其他下拉列表的值启用下拉列表

2 个答案: