отключить группу входов, если в другую группу ввода введены данные

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