Question

我正在设计一个像向导一样的表单，让用户遍历每个输入，并且在所有输入都被解决之前不允许它们继续。

我想显示表中的下一行当且仅当当前行中的所有输入都已填写或已选中时。行可以包含任意数量的文本输入，复选框或无线电组。

这是我目前的代码：

<table>
    <tr>
        <td><input type="text"></td>

        <td><input type="radio"></td>
    </tr>

    <tr style="display:none">
        <td><input type='radio'></td>

        <td><input type='checkbox'></td>
    </tr>

    <tr style="display:none">
        <td><input type='text'></td>

        <td><input type='text'></td>
    </tr>
</table>

function refreshCascadingLists() {
    // Get an array of tr's
    // Loop thorugh each and see if it should be shown based on it's predecessors status
    var prevHadUnselected = false;
    $("table tr").next("tr").each(function(curIdx, curEntity) {
        if (prevHadUnselected) {
            $(this).fadeOut();
        } else {
            $(this).fadeIn();
        }

        prevHadUnselected = false;
        $(this).find(":input").each(function(curSelIdx, curSelEntity) {
            if ($(curSelEntity).val() == "" && $(curSelEntity).not(":checked")) 
                prevHadUnselected = true;
        });
    });
}

$(document).ready(function() {
    $(":input").bind('keyup change', function() {
        refreshCascadingLists();
    });
});

当用户键入第一行的文本框时，这将显示下一行，但是他们还必须检查单选按钮。此外，它显示表中的所有行，而不是下一行。

Answer 1

我会做something like this：

function refreshCascadingLists($tr) {
    var all_filled = true;
    $tr.find(':input').each(function() {
        if($(this).is('input[type=radio], input[type=checkbox]')) {
            if(!$(this).is(':checked')) {
                all_filled = false;    
            }
        } else if($(this).val() == '') {
            all_filled = false;
        }
    });

    var $next_tr = $tr.next('tr');    
    if(all_filled) {
        if(!$next_tr.is(':visible')) {
            $next_tr.fadeIn(function() {
                refreshCascadingLists($(this));                    
            });    
        }
    } else {
        $tr.nextAll('tr').hide();
    }
}

$(document).ready(function() {
    $(":input").bind('keyup change', function() {
        refreshCascadingLists($(this).closest('tr'));
    });
});

大部分功能实际上都可以打高尔夫球，但是我这样写了，所以你可以很容易地看到它在做什么。

Answer 2

问题出在$("table tr").next("tr").each(...

您正在为$("table tr")中的每一行选择所有下一行。要解决问题，请移动.next("tr")内的each()。

这是简化的fiddle

逐步完成表格，因为所有输入都连续完成

2 个答案: