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 に答える