javascript - 如果另一个输入组输入了数据，则禁用输入组

Question

我正在系统地尝试为我的应用程序提供一种方法来禁用和启用输入组，具体取决于输入组中是否输入了任何内容。我开始在 jFiddle 中尝试如何做到这一点，但我目前被卡住了。

问题是我无法让它在多个组上工作..在一个组上工作正常。

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

});

Answer 1

我玩了一会儿，决定用它创建一个 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();

Answer 2

我想这就是你想要的。

$('.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);
});

或者，如果您想保持更细粒度的控制，您可以对块的parent进行操作。