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

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

我觉得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插件出来的，这似乎处理我quesiton：

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