1

--小提琴--

我正在设计一个像向导一样的表单，引导用户完成每个输入，并且在解决所有输入之前不允许他们继续。

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

这是我当前的代码：

<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();
    });
});​

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

4

2 回答 2

3

我会做这样的事情：

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'));
    });
});​

大多数功能实际上可以打得相当多，但我是这样写的，所以你可以很容易地看到它在做什么。

于 2012-12-11T16:12:38.583 回答
1

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

您正在为 中的每一行选择所有下一行$("table tr")。固定移动.next("tr")里面each()。

这是简化的小提琴

于 2012-12-11T16:02:57.073 回答