Question

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

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

这是我的jFiddle和代码：

<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

我认为this就是你想要的。

$('.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采取行动。

Answer 2

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

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

2 个答案: