0

入力グループのいずれかに何かが入力されているかどうかに基づいて、入力グループを無効および有効にする方法をアプリに体系的に提供しようとしています。jFiddleでこれを行う方法をいじり始めましたが、現在行き詰まっています。

問題は、複数のグループで機能するのに問題があることです.. 1 つのグループで正常に動作します。

ここに私のjFiddleとコードがあります:

http://jsfiddle.net/3t5RL/5/

<div class="one_or_other">
    <h1>Some Input Group</h1>
    <p class="ooo_group_1">
        <input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /> 
        <input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /> 
    </p>
    OR
    <p class="ooo_group_2">
        <input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /> 
        <input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /> 
    </p>
    OR
    <p class="ooo_group_3">
        <input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /> 
        <input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /> 
    </p>
</div>

<div class="one_or_other">
    <h1>Some Other Input Group</h1>
    <p class="ooo_group_1">
        <input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /> 
        <input type="text" data-disable='["ooo_group_2","ooo_group_3"]' /> 
    </p>
    OR
    <p class="ooo_group_2">
        <input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /> 
        <input type="text" data-disable='["ooo_group_1","ooo_group_3"]' /> 
    </p>
    OR
    <p class="ooo_group_3">
        <input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /> 
        <input type="text" data-disable='["ooo_group_1","ooo_group_2"]' /> 
    </p>
</div>

と

$('.one_or_other').each(function() {

    block = $(this);    
    block.find('input').keyup( function() {       
        if(this.value.length !== 0) {
            json = $(this).data('disable');
            $.each(json, function(i,item) {
                block.find('.' + item + ' input').prop('disabled',true).addClass('disabled');
            });
        } else {
            block.find('input').prop('disabled',false).removeClass('disabled');
        }
    });  

});
4

2 に答える 2

0

私は少し遊んで、私の質問を処理しているように見えるそれからjqueryプラグインを作成することにしました:

http://jsfiddle.net/8pyF2/9/

選択でも機能する機能を追加し、クリアボタンも追加しました。これをリファクタリングする必要があるかどうか教えてください。

html:

<div class="grouped_choice">
     <h1>Some Input Group</h1>
    <p>
        <input type="text" rel="group_1" />
        <input type="text" rel="group_1" />
        <a href="#" class="clear_group" rel="group_1">clear</a>
    </p>OR
    <p>
        <input type="text" rel="group_2" />
        <input type="text" rel="group_2" />
        <a href="#" class="clear_group" rel="group_2">clear</a>
    </p>OR
    <p>
        <input type="text" rel="group_3" />
        <input type="text" rel="group_3" />
        <a href="#" class="clear_group" rel="group_3">clear</a>
    </p>
</div>
<div class="grouped_choice">
     <h1>Some Other Input Group</h1>
    <p>
        <input type="text" rel="group_1" />
        <input type="text" rel="group_1" />
        <a href="#" class="clear_group" rel="group_1">clear</a>
    </p>OR
    <p>
        <input type="text" rel="group_2" />
        <input type="text" rel="group_2" />
        <a href="#" class="clear_group" rel="group_2">clear</a>
    </p>OR
    <p>
        <input type="text" rel="group_3" />
        <input type="text" rel="group_3" />
        <a href="#" class="clear_group" rel="group_3">clear</a>
    </p>
</div>

Javascript:

(function ($) {
    $.fn.groupedChoice = function () {
        this.each(function () {

            var parent = $(this);

            // handle change
            parent.on('change', 'input,select', function () {

                var field, group;

                field = $(this);
                group = field.attr('rel');

                if (field.val().length !== 0) {
                    parent.find('input[rel!="' + group + '"],select[rel!="' + group + '"]').prop('disabled', true).addClass('disabled');
                } else {
                    var empty = true
                    parent.find('input[rel='+group+'],input[rel='+group+']').each( function() {                        
                        if($(this).val().length !== 0) empty = false
                    });
                    if(empty) parent.find('input,select').prop('disabled', false).removeClass('disabled');
                }

            });

            // handle group clear
            parent.find('.clear_group').click( function(e) {
                e.preventDefault();    
                group = $(this).attr('rel');  
                disabled = false;
                parent.find('input[rel='+group+'],select[rel='+group+']').each( function() {
                    if( $(this).prop('disabled') ) disabled = true
                }) 
                if(!disabled) {
                    parent.find('input[rel='+group+'],select[rel='+group+']').val('');
                    parent.find('input,select').prop('disabled', false).removeClass('disabled');
                }
            });
        });

    };
})(jQuery);

$('.grouped_choice').groupedChoice();
于 2013-04-17T17:20:55.343 に答える
0

これがあなたの望むものだと思います。

$('.one_or_other').on('keyup', 'input', function () {
    var selector = $(this).parent().attr('class');
    $('p[class="' + selector + '"] input').attr('disabled', false);
    $('p[class!="' + selector + '"] input').attr('disabled', true);
});

または、よりきめ細かい制御を維持したい場合は、ブロックの親に作用することができます。

于 2013-04-17T01:27:29.463 に答える